CSS小课堂之阴影
2017-07-01 本文已影响222人
前端小透明
box-shadow 以逗号分割列表来描述一个或多个阴影效果，可以用到几乎任何元素上。 如果元素同时设置了 border-radius，阴影也会有圆角效果。
语法
box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#;
-
inset
加上 inset 表示阴影在边框内。 -
<offset-x> <offset-y>
阴影在 x 轴和 y 轴的偏移量。x 轴为正值表示向右，y 轴为正值表示向下。 -
<blur-radius>
模糊半径，值越大，模糊面积越大，阴影就越大越淡。不能为负值。默认为0，此时阴影边缘锐利。 -
<spread-radius>
扩散半径，取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。 -
<color>
颜色。
举例
-
普通青年
一个最简单的例子。
/* <offset-x> | <offset-y> | <color> */
box-shadow: 60px 16px #ddd;
simplest
-
近视青年
模糊的阴影。骚年，你近视了。
/* <offset-x> | <offset-y> | <blur-radius> | <color> */
box-shadow: 60px 16px 5px #ddd;
blur-radius
-
肥胖青年
可以看出，圆角放大了，说明该青年被岁月磨平了棱角。
/* <offset-x> | <offset-y> | <blur-radius> | <spread-radius> | <color> */
box-shadow: 60px 16px 0 10px #ddd;
spread-radius
-
内敛青年
阴影出现在元素内部。
/* inset | <offset-x> | <offset-y> | <color> */
box-shadow: inset 60px 16px #ddd;
inset
-
富有青年
使用逗号来分割多个阴影。
/* <shadow>, <shadow> */
box-shadow: 30px 16px #ddd, 60px 32px #eee;
multiple shadows
-
弥散阴影
制作简单的弥散阴影。模糊半径应尽量大，扩展半径比元素稍小。调出来的效果还是要看个人审美的（蜜汁自信）。
box-shadow: 0 20px 20px -10px rgba(18, 148, 246, .4);
diffuse
-
加载中
利用多阴影的特性，我们可以只使用一个元素和多个阴影来组合出有意思的东西，例如加载中的小姐姐，噢不，是小点点。
box-shadow:
30px 0 rgba(18, 148, 246, .8),
60px 0 rgba(18, 148, 246, .6),
90px 0 rgba(18, 148, 246, .4),
120px 0 rgba(18, 148, 246, .2);
loading
兼容性
compatibility
