阴影
看!就像有人在我的网页上打手电筒一样!
你可以通过为边框和文本应用阴影来让你的页面部分“脱颖而出”。
边框阴影
box-shadow 是标准的 CSS 属性,它可以包含多个值:
box-shadow: 5px 5px 3px 1px #999
- 第一个值是水平偏移——阴影向右(如果为负则向左)移动的距离。
- 第二个值是垂直偏移——阴影向下(如果为负则向上)移动的距离。
- 第三个值是模糊半径——值越高,阴影越不锐利(“0”表示绝对锐利)。此项是可选的,省略相当于设置为“0”。
- 第四个值是扩展距离——值越高,阴影越大(“0”表示边框的继承大小)。此项也是可选的,省略相当于设置为“0”。
- 第五个值是颜色。这也是可选的。
内阴影
你还可以通过在列表中添加“inset”来为边框内部应用阴影。
box-shadow: inset 0 0 7px 5px #ddd;
太棒了!

文本阴影
顾名思义,box-shadow 只关注边框。真是个善变的家伙。但是,你也可以(意想不到吧!)使用 text-shadow 为文本轮廓应用阴影。
text-shadow: -2px 2px 2px #999;
与 box-shadow 类似:
- 第一个值是水平偏移。
- 第二个值是垂直偏移。
- 第三个值是模糊半径(可选)。
- 第四个值是颜色(可选,但省略此项会使阴影颜色与文本颜色相同)。
请注意,text-shadow 没有扩展距离或 inset 选项。
