CSS高级篇——阴影

Posted 2022-12-02 feelang

阴影可以让元素“浮起来”，盒子（box）和文本都可以用。

盒子阴影

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” 值）。