box-shadow
是 CSS 属性,用于为元素添加一个阴影效果,使元素看起来浮起或有层次感。
该属性允许设置一个或多个阴影效果,其语法如下:
box-shadow: h-shadow v-shadow blur spread color inset;
-
h-shadow
:水平阴影的位置。可以使用负值表示阴影在元素左侧,正值表示阴影在元素右侧,0 表示没有水平阴影。 -
v-shadow
:垂直阴影的位置。可以使用负值表示阴影在元素上方,正值表示阴影在元素下方,0 表示没有垂直阴影。 -
blur
:模糊半径。可选值,表示阴影的模糊程度。值越大,阴影越模糊,0 表示没有模糊。 -
spread
:阴影的扩展半径。可选值,表示阴影的大小扩展。正值表示阴影扩展,负值表示阴影收缩。 -
color
:阴影的颜色。可选值,表示阴影的颜色,可以是 CSS 颜色值(如#rrggbb
、rgba()
、hsl()
等)。 -
inset
:可选值,用于设置是否为内阴影。如果存在inset
,则表示是内阴影,否则为外阴影。内阴影会出现在元素内部,外阴影则出现在元素外部。
例如,以下是一个示例,展示如何应用 box-shadow
属性:
div {
width: 200px;
height: 100px;
background-color: #f0f0f0;
box-shadow: 4px 4px 10px #888888;
}
在上述示例中,box-shadow: 4px 4px 10px #888888;
的样式为 <div>
元素添加了一个外阴影效果。水平位置为 4px,垂直位置为 4px,模糊半径为 10px,颜色为 #888888
。这样 <div>
元素将有一个看起来浮起的效果,有了层次感。