1.基本语法：
box-shadow属性可接受多个值，其基本语法为box-shadow: h-shadow v-shadow blur spread color inset;
- h-shadow：表示水平阴影的位置，正值向右偏移，负值向左偏移。
- v-shadow：表示垂直阴影的位置，正值向下偏移，负值向上偏移。
- blur：可选值，用于设置阴影的模糊程度，值越大，阴影越模糊。
- spread：可选值，指定阴影的扩展或收缩程度，正值使阴影扩大，负值使阴影缩小。
- color：可选值，设置阴影的颜色。
- inset：可选关键字，若添加该关键字，阴影将变为内阴影，否则为外阴影。
2.示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box {
width: 200px;
height: 200px;
background-color: lightblue;
/* 设置外阴影，水平偏移10px，垂直偏移10px，模糊半径5px，阴影颜色为灰色 */
box-shadow: 10px 10px 5px gray;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
在上述代码中，为一个div元素添加了一个外阴影，使其在右下角呈现出一定的阴影效果。
3.内阴影示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box {
width: 200px;
height: 200px;
background-color: lightblue;
/* 设置内阴影，水平偏移 -5px，垂直偏移 -5px，模糊半径3px，阴影颜色为darkblue */
box-shadow: inset -5px -5px 3px darkblue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
这段代码则展示了如何为div元素设置内阴影，让阴影出现在元素内部的左上角。通过调整box-shadow属性的各个值，可以创建出各种不同效果的阴影，为网页元素增添立体感和视觉吸引力。
扫一扫
203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
