css box-shadow用法

2024年1月31日发(作者：)

css box-shadow用法

box-shadow 是 CSS 属性之一，用于在元素周围添加阴影效果。通过使用 box-shadow，你可以为元素创建漂亮的立体感效果。以下是 box-shadow 的基本用法和语法：

css

Copy code

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

h-shadow： 必需。水平阴影的位置。可以为正值（向右偏移）或负值（向左偏移）。

v-shadow： 必需。垂直阴影的位置。可以为正值（向下偏移）或负值（向上偏移）。

blur： 可选。模糊距离。如果为 0，则阴影边缘会是锐利的，值越大，边缘越模糊。

spread： 可选。阴影的尺寸。正值会使阴影扩展，负值会使阴影收缩。

color： 可选。阴影的颜色。可以使用颜色名称、十六进制、RGB

等表示法。

inset： 可选。如果存在，阴影在边框内（内部阴影）而不是在边框外（外部阴影）。

以下是一些例子：

1 / 2

css

Copy code

/* 外部阴影，黑色，垂直10px、水平5px偏移，模糊程度10px

*/

box-shadow: 5px 10px 10px black;

/* 外部阴影，红色，垂直0、水平0偏移，无模糊，尺寸10px

*/

box-shadow: 0 0 0 10px red;

/* 内部阴影，蓝色，垂直0、水平0偏移，无模糊，尺寸5px */

box-shadow: inset 0 0 0 5px blue;

你可以根据需要组合这些值来创建不同的阴影效果。box-shadow

属性提供了一种简便而强大的方式来添加阴影，用于增强页面元素的外观。

2 / 2