CSS box-shadow 速记

CSS 中的 box-shadow 属性可以用于在元素周围创建一个阴影效果。以下是关于 box-shadow 属性的速记指南。

基本语法

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

• h-shadow: 必需。水平阴影的位置。可为正数（右侧阴影）或负数（左侧阴影）。
• v-shadow: 必需。垂直阴影的位置。可为正数（下方阴影）或负数（上方阴影）。
• blur: 可选。模糊距离。
• spread: 可选。阴影的尺寸。
• color: 可选。阴影的颜色。默认为黑色。

例子

以下是一些示例，演示如何使用 box-shadow 属性。

/* 创建一个灰色边框 */
box-shadow: 0 0 10px gray;

/* 创建一个带有向右下角的阴影的元素 */
box-shadow: 5px 5px gray;

/* 创建一个带有模糊效果的阴影 */
box-shadow: 0 0 10px 5px gray;

/* 创建一个带有更大阴影的边框 */
box-shadow: 0 0 10px 5px gray, 0 0 20px 10px gray;

/* 创建一个带有不同颜色阴影的元素 */
box-shadow: 5px 5px gray, -5px -5px white;

参考文献

• CSS box-shadow 属性 （英文）