css中的阴影详解
在 CSS 中，阴影效果通常使用 box-shadow 和 text-shadow 来实现，它们分别适用于元素的框和文本。阴影是提升页面设计感和层次感的告急工具。下面，我会详细讲授这两个属性，并结合代码示例分析。1. box-shadow
box-shadow 用于为元素的框添加阴影效果，语法如下：
box-shadow: h-offset v-offset blur spread color inset;
[*]h-offset（水平偏移）：阴影相对于元素的水平位置。正值表现阴影在元素的右侧，负值表现阴影在左侧。
[*]v-offset（垂直偏移）：阴影相对于元素的垂直位置。正值表现阴影在元素的下方，负值表现阴影在上方。
[*]blur（含糊半径）：控制阴影的含糊水平，值越大，阴影越含糊。默以为 0，表现没有含糊。
[*]spread（扩展半径）：控制阴影的大小，正值表现阴影会扩展，负值表现阴影会收缩。
[*]color（颜色）：阴影的颜色，可以使用任何合法的颜色值（如 rgba, #hex, rgb 等）。
[*]inset（内阴影，可选）：表现阴影是内嵌在元素内部的。假如不指定，阴影会在元素外部。
示例
<div class="box-shadow-example">盒子阴影</div>
<style>
.box-shadow-example {
width: 200px;
height: 100px;
background-color: #4CAF50;
color: white;
line-height: 100px;
text-align: center;
box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.5);
}
</style>
[*]box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.5);:
[*]10px：水平偏移 10 像素，阴影向右。
[*]10px：垂直偏移 10 像素，阴影向下。
[*]20px：含糊半径 20 像素，阴影会变得含糊。
[*]5px：扩展半径 5 像素，阴影会稍微增大。
[*]rgba(0, 0, 0, 0.5)：阴影的颜色为半透明黑色。
2. text-shadow
text-shadow 用于为文本添加阴影效果，语法如下：
text-shadow: h-offset v-offset blur color;
[*]h-offset（水平偏移）：阴影相对于文本的水平位置，正值向右偏移，负值向左偏移。
[*]v-offset（垂直偏移）：阴影相对于文本的垂直位置，正值向下偏移，负值向上偏移。
[*]blur（含糊半径）：控制阴影的含糊水平，值越大，阴影越含糊。
[*]color（颜色）：阴影的颜色。
示例
<h1 class="text-shadow-example">带阴影的文本</h1>
<style>
.text-shadow-example {
font-size: 50px;
text-align: center;
text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}
</style>
[*]text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);:
[*]3px：水平偏移 3 像素，阴影向右。
[*]3px：垂直偏移 3 像素，阴影向下。
[*]5px：含糊半径 5 像素，阴影稍微含糊。
[*]rgba(0, 0, 0, 0.3)：阴影的颜色为半透明黑色。
3. 多重阴影
box-shadow 和 text-shadow 都可以同时应用多个阴影，多个阴影使用逗号分隔。每个阴影的语法遵照相同的规则。
示例
<div class="multi-shadow-example">多重阴影效果</div>
<style>
.multi-shadow-example {
width: 200px;
height: 100px;
background-color: #ff6347;
color: white;
line-height: 100px;
text-align: center;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), -5px -5px 10px rgba(0, 0, 0, 0.1);
}
</style>
[*]box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), -5px -5px 10px rgba(0, 0, 0, 0.1);:
[*]第一个阴影：偏移 5px 向右下方，含糊半径为 10px，半透明黑色。
[*]第二个阴影：偏移 -5px 向左上方，含糊半径为 10px，浅色阴影。
4. 内阴影
box-shadow 还可以应用内阴影（inset），它会使阴影出现在元素内部。
示例
<div class="inset-shadow-example">内阴影效果</div>
<style>
.inset-shadow-example {
width: 200px;
height: 100px;
background-color: #87cefa;
color: black;
line-height: 100px;
text-align: center;
box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.4);
}
</style>
[*]box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.4);:
[*]inset：使阴影呈内阴影，阴影在元素内部。
[*]5px 5px：阴影向右下方偏移 5 像素。
[*]15px：含糊半径为 15 像素，阴影较为含糊。
[*]rgba(0, 0, 0, 0.4)：阴影颜色为半透明黑色。
总结
[*]box-shadow 用于元素框的阴影，可以调整偏移、含糊、扩展和颜色，还可以设置内阴影。
[*]text-shadow 用于文本的阴影，告急控制文本的偏移、含糊和颜色。
[*]可以通过逗号分隔来实现多个阴影效果。
使用阴影时要注意性能问题，过多的阴影大概影响页面渲染速率，尤其是在低性能设备上。得当使用阴影能有用增强页面的视觉层次感和设计感。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]