【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
一个值，border-radius:50px;表示水平半径和垂直半径相等；
两个值：border-radius:100px / 50px;"/"前的值表示水平半径，"/"后的值表示垂直半径，两个值 的顺序与一个值的顺序相同：左上，右上，右下，左下。css3还提供了对每个角进行设置：
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
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%)【要点】：
radial-gradient(渐变形状 at 渐变圆心，渐变颜色 [颜色渐变开始位置(距离渐变圆心的大小)],渐变颜色[颜色渐变位置])
-webkit-radial-gradient(渐变圆心，渐变形状，渐变颜色 [颜色渐变开始位置(距离渐变圆心的大小)],渐变颜色 [颜色渐变位置])
颜色渐变位置不写时，默认第一个颜色位置是0，第二个是100%。
不在指定渐变区域的，以距离其最近的颜色填充。
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
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
