6.1 属性 box-shadow
在 CSS 中，box-shadow 属性用于给元素添加阴影。这个属性可以创建各种视觉效果，提升网页的外观。让我们详细看看 box-shadow 的语法、值以及使用示例。
box-shadow 语法
box-shadow 属性接受一个或多个值，每个值定义了阴影的参数。通用语法如下：
element {
box-shadow: offset-x offset-y blur-radius spread-radius color;
}
值：
offset-x: 阴影的水平偏移。正值向右偏移阴影，负值向左offset-y: 阴影的垂直偏移。正值向下偏移阴影，负值向上blur-radius: 阴影的模糊半径。值越大，阴影越模糊。默认值为 0（无模糊效果）spread-radius: 阴影的扩展半径。正值增加阴影尺寸，负值减少。默认值为 0color: 阴影颜色。支持所有 CSS 颜色格式
6.2 使用示例
基本阴影：
CSS
.shadow-basic {
width: 200px;
height: 200px;
background-color: #3498db;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
margin: 20px;
}
HTML
<body>
<div class="shadow-basic">基本阴影</div>
</body>
模糊阴影：
CSS
.shadow-blur {
width: 200px;
height: 200px;
background-color: #2ecc71;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
HTML
<body>
<div class="shadow-blur">模糊阴影</div>
</body>
扩展阴影：
CSS
.shadow-spread {
width: 200px;
height: 200px;
background-color: #e74c3c;
box-shadow: 10px 10px 20px 10px rgba(0, 0, 0, 0.5);
margin: 20px;
}
HTML
<body>
<div class="shadow-spread">扩展阴影</div>
</body>
内阴影：
CSS
.shadow-inset {
width: 200px;
height: 200px;
background-color: #f1c40f;
box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
HTML
<body>
<div class="shadow-inset">内阴影</div>
</body>
6.3 box-shadow 设置
box-shadow 的详细设置：
阴影偏移 (offset-x 和 offset-y)
- 正值: 阴影向右偏移 (
offset-x) 和向下偏移 (offset-y) - 负值: 阴影向左偏移 (
offset-x) 和向上偏移 (offset-y)
阴影模糊 (blur-radius)
- 值为 0: 阴影会很清晰，无模糊
- 正值: 值越大，阴影越模糊
阴影扩展 (spread-radius)
- 正值: 阴影尺寸增加
- 负值: 阴影尺寸减少
阴影颜色 (color)
颜色可以用多种格式表示：颜色名、十六进制代码、RGB、RGBA、HSL、HSLA。
内阴影 (inset)
关键字 inset 创建元素内部的阴影，可以用于创建压入效果。
多个具有不同参数的阴影：
CSS
.multiple-shadows {
width: 200px;
height: 200px;
background-color: #bdc3c7;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 15px rgba(0, 0, 0, 0.3);
margin: 20px;
}
HTML
<body>
<div class="multiple-shadows">多个阴影</div>
</body>
GO TO FULL VERSION