【css3学习系列】之bo-shadow,radial-gradient,linear-gradient

Talk is cheap.Show me the code.

1.box-shadow

 .chopsticks{      position: absolute;      left: 400px;      top: 80px;      width: 10px;      height: 250px;      background-color: # bb8855;      border-radius: 3px;      -webkit-border-radius: 3px;        box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2),inset 0 -5px 2px 0 rgba(0,0,0,0.1);      z-index: 99;  }    .chopsticks:before{        content: '';        position: absolute;        left: 20px;        top: 0px;        width: 10px;        height: 250px;        background-color: # bb8855;        border-radius: 3px;        -webkit-border-radius: 3px;        box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2),inset 0 -5px 2px 0 rgba(0,0,0,0.1);        z-index: 99;    }

【注】:box-shadow是由逗号分隔的阴影列表,每个逗号隔开的便是一个阴影,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定,可给每个class添加一个或多个阴影。阴影的颜色是任意的,所以阴影有很多妙用。

2.border-radius

.egg{        position: absolute;        top: 20px;        left: 35px;        width: 80px;        height: 100px;        z-index: 7;        border-radius: 50% / 60% 60% 40% 40%;        -webkit-border-radius:50% / 60% 60% 40% 40%;                background-color: # fff;        transform:rotate(20deg);    }   .egg:before{        content: '';        position: absolute;        top: 30%;        left: 24%;        width: 50%;        height: 50%;        z-index: 7;        border-radius: 50%;        -webkit-border-radius:50%;        background: # FC0;        box-shadow: 0 0 2px 2px # f90,inset 0 0 5px 1px rgba(255, 153, 0, 0.5);        }

【注】:border-radius

  1. 一个值,border-radius:50px;表示水平半径和垂直半径相等;
    两个值:border-radius:100px / 50px;"/"前的值表示水平半径,"/"后的值表示垂直半径,两个值 的顺序与一个值的顺序相同:左上,右上,右下,左下。

  2. css3还提供了对每个角进行设置:

border-top-left-radius

  1. border-top-right-radius

  2. border-bottom-right-radius

  3. border-bottom-left-radius

3.radial-gradient(径向渐变)

(demo可参考下面的图,碗和面条都是用径向渐变实现的)

 background-image:radial-gradient(ellipse at center center, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.1) 21%, # ffcc33 21%, # ffcc33 23%, rgba(0, 0, 0, 0.1) 23%, rgba(0, 0, 0, 0) 24%) background-image:-webkit-radial-gradient(center center,ellipse, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.1) 21%, # ffcc33 21%, # ffcc33 23%, rgba(0, 0, 0, 0.1) 23%, rgba(0, 0, 0, 0) 24%)

【要点】:

  1. radial-gradient(渐变形状 at 渐变圆心,渐变颜色 [颜色渐变开始位置(距离渐变圆心的大小)],渐变颜色[颜色渐变位置])

  2. -webkit-radial-gradient(渐变圆心,渐变形状,渐变颜色 [颜色渐变开始位置(距离渐变圆心的大小)],渐变颜色 [颜色渐变位置])

  3. 颜色渐变位置不写时,默认第一个颜色位置是0,第二个是100%。

  4. 不在指定渐变区域的,以距离其最近的颜色填充。

4.linear-gradient(线性渐变)

(demo可参考下面的图,海苔是用线性渐变实现的)

   background-image: linear-gradient(-20deg, rgba(0, 0, 0, 0.9) 50%, rgba(0, 34, 0, 0.95) 95%);   background-image: -webkit-linear-gradient(110deg, rgba(0, 0, 0, 0.9) 50%, rgba(0, 34, 0, 0.95) 95%);

【要点】:可用方向或角度值指定渐变的方向(或角度)。
to left:设置渐变为从右到左。相当于: 270deg
to right:设置渐变从左到右。相当于: 90deg
to top:设置渐变从下到上。相当于: 0deg
to bottom:设置渐变从上到下。相当于: 180deg。这是默认值,等同于留空不写。

最后奉上一碗拉面。

【注】: 拉面原创出处:https://codepen.io/aaronchuo/pen/GLEed

关键字:css

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部