阴影

阴影可以让元素“浮起来”,盒元素和文本都适用。

盒阴影

box-shadow 属性值有一串:

box-shadow: 5px 5px 3px 1px #999
  1. 第一个值表示水平位移,正数往右,负数往左
  2. 第二个值表示垂直位移,正数往下,负数往上
  3. 第三个值表示模糊半径,值越小,越锐利。这个值可以省略,默认取值为 0
  4. 第四个值表示延展距离,值约大,阴影越大。这个值也可以省略,默认取值为 0
  5. 第五个值表示颜色。可以省略。

内部阴影

box-shadow 还可以设置内部阴影,只需要在值列表中加一个 “inset”:

box-shadow: inset 0 0 7px 5px #ddd;

文本阴影

box-shadow 作用于盒元素(box)。text-shadow 作用于文本。

text-shadow: -2px 2px 2px #999;
  1. 第一个值表示水平位移
  2. 第二个值表示垂直位移
  3. 第三个值表示模糊半径(可选)
  4. 第三个值表示颜色(可选)

注意,text-shadow 没有延展距离,也没有内部阴影(”inset” 值)。

更新时间: