CSS3 box-shadow 属性
说明
box-shadow CSS 属性将一种或多种阴影效果应用于元素的盒子。
下表总结了此属性的使用上下文和版本历史记录。
| 默认值： | none |
|---|---|
| 适用于： | All elements. It also applies to ::first-letter. |
| 继承： | No |
| 动画： | Yes. 参见动画属性。 |
| 版本： | New in CSS3 |
语法
属性的语法如下：
下面的示例显示了 box-shadow 属性的作用。
.shadow{
width: 150px;
height: 150px;
background: #ccc;
border: 1px solid #999;
box-shadow: 2px 2px 4px 2px #999;
}您可以使用 inset 关键字在元素框内应用阴影。 嵌入阴影绘制在边框内，在背景之上，但在内容之下。
.shadow-inside{
width: 150px;
height: 150px;
background: #ccc;
border: 1px solid #999;
box-shadow: inset 0 0 6px 2px #999;
}属性值
下表描述了该属性的值。
| 值 | 说明 |
|---|---|
| Required — 必须指定以下值才能使属性有效。 | |
| offset-x | 第一个长度值指定阴影的水平距离。 正值绘制一个偏移到框右侧的阴影，而负值则将阴影偏移到左侧。 |
| offset-y | 第二个长度值指定阴影的垂直距离。 正值向下偏移阴影，而负值偏移元素上方的阴影。 |
| Optional — 以下值是可选的。 | |
| blur-radius | 第三个长度值是模糊距离。 这个值越大，模糊越大，所以阴影变得更大更亮。 默认值为 0，阴影清晰。 不允许使用负值。 |
| spread-radius | 第四个长度是传播距离。 正值会使阴影形状在所有方向上扩展指定的半径。 负值会导致阴影形状收缩。 |
| color | 颜色是阴影的颜色。 该值可以是任何受支持的颜色值。 如果未指定，通常是 color 属性的值。 |
inset |
如果存在，将投影从外部阴影更改为内部阴影。 嵌入阴影绘制在边框内，在背景之上，但在元素内容之下。 |
none |
不会显示阴影。 这是默认值。 |
initial |
将此属性设置为其默认值。 |
inherit |
如果指定，则关联元素采用其父元素 box-shadow 属性的 计算值。 |
浏览器兼容性
所有主要的现代浏览器都支持 box-shadow 属性。
 |
基本支持—
|
进一步阅读
相关属性： text-shadow.
Advertisements