CSS小课堂之阴影

box-shadow 以逗号分割列表来描述一个或多个阴影效果,可以用到几乎任何元素上。 如果元素同时设置了 border-radius,阴影也会有圆角效果。

语法

box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#;
  1. inset
    加上 inset 表示阴影在边框内。
  2. <offset-x> <offset-y>
    阴影在 x 轴和 y 轴的偏移量。x 轴为正值表示向右,y 轴为正值表示向下。
  3. <blur-radius>
    模糊半径,值越大,模糊面积越大,阴影就越大越淡。不能为负值。默认为0,此时阴影边缘锐利。
  4. <spread-radius>
    扩散半径,取正值时,阴影扩大;取负值时,阴影收缩。默认为0,此时阴影与元素同样大。
  5. <color>
    颜色。

举例

  1. 普通青年
    一个最简单的例子。
/* <offset-x> | <offset-y> | <color> */
box-shadow: 60px 16px #ddd;
simplest
  1. 近视青年
    模糊的阴影。骚年,你近视了。
/* <offset-x> | <offset-y> | <blur-radius> | <color> */
box-shadow: 60px 16px 5px #ddd;
blur-radius
  1. 肥胖青年
    可以看出,圆角放大了,说明该青年被岁月磨平了棱角。
/* <offset-x> | <offset-y> | <blur-radius> | <spread-radius> | <color> */
box-shadow: 60px 16px 0 10px #ddd;
spread-radius
  1. 内敛青年
    阴影出现在元素内部。
/* inset | <offset-x> | <offset-y> | <color> */
box-shadow: inset 60px 16px #ddd;
inset
  1. 富有青年
    使用逗号来分割多个阴影。
/* <shadow>, <shadow> */
box-shadow: 30px 16px #ddd, 60px 32px #eee;
multiple shadows
  1. 弥散阴影
    制作简单的弥散阴影。模糊半径应尽量大,扩展半径比元素稍小。调出来的效果还是要看个人审美的(蜜汁自信)。
box-shadow: 0 20px 20px -10px rgba(18, 148, 246, .4);
diffuse
  1. 加载中
    利用多阴影的特性,我们可以只使用一个元素和多个阴影来组合出有意思的东西,例如加载中的小姐姐,噢不,是小点点。
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

参考

推荐阅读更多精彩内容