添加阴影的CSS属性

当你想要让你的元素拥有阴影效果时，可以通过CSS样式来实现。在CSS中，需要使用 box-shadow属性来为元素添加阴影效果。

语法

box-shadow: h-shadow v-shadow blur spread color inset;

参数

• h-shadow：必须的参数，表示水平阴影的位置。正值表示右侧，负值表示左侧。
• v-shadow：必须的参数，表示垂直阴影的位置。正值表示向下，负值表示向上。
• blur：可选参数，表示模糊半径，值越大阴影越模糊。
• spread：可选参数，表示扩张半径，负值表示收缩，正值表示扩张。
• color：可选参数，表示阴影颜色。
• inset：可选参数，表示阴影在元素内部。

示例

/* 添加一个灰色的默认阴影 */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

/* 添加一个黑色的边框阴影 */
box-shadow: 0 0 10px black, 
            0 0 20px black, 
            0 0 30px black, 
            0 0 40px black;

/* 添加一个红色的内嵌阴影 */
box-shadow: inset 0 0 10px red;

/* 添加一个带有扩张半径的内嵌阴影 */
box-shadow: inset 0 0 10px 5px rgba(0, 0, 255, 0.5);

以上就是使用 box-shadow 属性来为元素添加阴影的示例。通过调整不同参数的值，可以得到不同样式的阴影效果。