定义和用法
box-shadow 属性向框添加一个或多个阴影。
CSS box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果,并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。
提示:请使用 border-image-* 属性来构造漂亮的可伸缩按钮!
语法
/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;
/* 任意数量的阴影,以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
向元素添加单个 box-shadow 效果时使用以下规则
当给出两个、三个或四个 <length>
值时。
如果只给出两个值, 那么这两个值将会被当作 <offset-x><offset-y>
来解释。
如果给出了第三个值, 那么第三个值将会被当作<blur-radius>
解释。
如果给出了第四个值, 那么第四个值将会被当作<spread-radius>
来解释。
可选,inset
关键字。
可选,<color>
值。
若要对同一个元素添加多个阴影效果,请使用逗号将每个阴影规则分隔开。
取值
inset
如果没有指定inset,默认阴影在边框外,即阴影向外扩散。
使用 inset 关键字会使得阴影落在盒子内部,这样看起来就像是内容被压低了。 此时阴影会在边框之内 (即使是透明边框)、背景之上、内容之下。
<offset-x>
<offset-y>
这是头两个 <length>
值,用来设置阴影偏移量。x,y 是按照数学二维坐标系来计算的,只不过y垂直方向向下。 <offset-x>
设置水平偏移量,正值阴影则位于元素右边,负值阴影则位于元素左边。 <offset-y>
设置垂直偏移量,正值阴影则位于元素下方,负值阴影则位于元素上方。可用单位请查看 <length>
。
如果两者都是0,那么阴影位于元素后面。这时如果设置了<blur-radius>
或<spread-radius>
则有模糊效果。需要考虑 inset
<blur-radius
>
这是第三个 <length>
值。值越大,模糊面积越大,阴影就越大越淡。 不能为负值。默认为0,此时阴影边缘锐利。本规范不包括如何计算模糊半径的精确算法,但是,它详细说明如下:
对于长而直的阴影边缘,它会创建一个过渡颜色用于模糊 以阴影边缘为中心、模糊半径为半径的局域,过渡颜色的范围在完整的阴影颜色到它最外面的终点的透明之间。 (译者注:对此有兴趣的可以了解下数字图像处理的模糊算法。)
<spread-radius
>
这是第四个 值。取正值时,阴影扩大;取负值时,阴影收缩。默认为0,此时阴影与元素同样大。需要考虑 inset
<color
>
相关事项查看 。如果没有指定,则由浏览器决定——通常是color的值,不过目前Safari取透明。
菜鸟教程参考图片: