CSS高级篇——阴影
Posted feelang
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS高级篇——阴影相关的知识,希望对你有一定的参考价值。
阴影可以让元素“浮起来”,盒子(box)和文本都可以用。
盒子阴影
box-shadow
属性值有一串:
box-shadow: 5px 5px 3px 1px #999
- 第一个值表示水平位移,正数往右,负数往左
- 第二个值表示垂直位移,正数往下,负数往上
- 第三个值表示模糊半径,值越小,越锐利。这个值可以省略,默认取值为 0
- 第四个值表示延展距离,值约大,阴影越大。这个值也可以省略,默认取值为 0
- 第五个值表示颜色。可以省略。
内部阴影
box-shadow
还可以设置内部阴影,只需要在值列表中加一个 “inset”:
box-shadow: inset 0 0 7px 5px #ddd;
文本阴影
box-shadow
作用于盒元素(box)。text-shadow
作用于文本。
text-shadow: -2px 2px 2px #999;
- 第一个值表示水平位移
- 第二个值表示垂直位移
- 第三个值表示模糊半径(可选)
- 第三个值表示颜色(可选)
注意,text-shadow
没有延展距离,也没有内部阴影(“inset” 值)。
以上是关于CSS高级篇——阴影的主要内容,如果未能解决你的问题,请参考以下文章
CSS Safari CSS3 Fun - 目标+边框半径+框阴影