CSS | box-shadow 属性

介绍

box-shadow 属性用于创建元素的阴影效果。它可以接受多个参数定义阴影效果的大小、颜色和位置。

语法

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

• h-shadow：必需，指定水平方向上的偏移量。可以为正数、负数，0表示水平方向没有偏移量。
• v-shadow：必需，指定垂直方向上的偏移量。可以为正数、负数，0表示垂直方向没有偏移量。
• blur：可选，指定阴影的模糊程度。可以为正数、0。值越大，阴影越模糊。
• spread：可选，指定阴影的扩展程度。可以为正数、负数。为正数时，阴影扩展；为负数时，阴影收缩。
• color：可选，指定阴影的颜色。可以为颜色名称、十六进制、rgb、rgba等。
• inset：可选，指定阴影内嵌。不设置时默认阴影外凸。

示例

/* 创建一个黄色半透明的阴影，偏移量为0，模糊度为5px */
box-shadow: 0 0 5px rgba(255,255,0,0.5);

/* 创建一个黑色外凸的阴影，偏移量为2px,颜色为黑色 */
box-shadow: 2px 2px black;

/* 创建一个灰色阴影，水平偏移量为10px，扩展程度为5px */
box-shadow: 10px 0 5px gray;

/* 创建一个内嵌的黑色阴影，水平偏移量为0，垂直偏移量为5px，模糊程度为3px */
box-shadow: inset 0 5px 3px black;

兼容性

box-shadow 属性的兼容性较好，目前所有主流浏览器都支持该属性。

应用场景

box-shadow 属性的应用场景很广，常见用于页面按钮、图片、文本框等元素的阴影效果，可以为页面加入一些细微的立体感，提高用户体验。

/* 为按钮添加阴影效果 */
button {
  box-shadow: 0 2px 3px rgba(0,0,0,0.3);
}

/* 为图片添加阴影效果 */
img {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}

/* 为文本框添加内嵌的灰色阴影 */
input[type="text"] {
  box-shadow: inset 0 1px 1px gray;
}

总结

box-shadow 属性是一种常用的表现元素阴影效果的方法，语法简单，兼容性好，可以为页面增加立体感，提高用户体验。在实际应用中，建议根据不同的需求选择合适的参数组合，以达到最佳的视觉效果。