css实现阴影效果
2025-04-23
14
参考资料
CSS 阴影效果
1. box-shadow 属性
用于为元素添加阴影效果。
语法：
box-shadow: h-offset v-offset blur spread color inset;
属性值：
h-offset：水平阴影位置（必需）v-offset：垂直阴影位置（必需）blur：模糊距离（可选）spread：阴影尺寸（可选）color：阴影颜色（可选）inset：内阴影（可选）
示例：
div {
box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.3);
}2. text-shadow 属性
用于为文本添加阴影效果。
语法：
text-shadow: h-offset v-offset blur color;
属性值：
h-offset：水平阴影位置（必需）v-offset：垂直阴影位置（必需）blur：模糊距离（可选）color：阴影颜色（可选）
示例：
h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}3. 多重阴影
可以为一个元素添加多个阴影，用逗号分隔。
示例：
div {
box-shadow:
3px 3px 5px rgba(0, 0, 0, 0.2),
-3px -3px 5px rgba(255, 255, 255, 0.2);
}4. 内阴影
使用 inset 关键字创建内阴影。
示例：
div {
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}5. 实际应用示例
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background: #fff;
margin: 20px;
padding: 20px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}
.text {
font-size: 24px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.multiple {
box-shadow:
3px 3px 5px rgba(0, 0, 0, 0.2),
-3px -3px 5px rgba(255, 255, 255, 0.2);
}
.inset {
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="box">普通阴影</div>
<div class="box multiple">多重阴影</div>
<div class="box inset">内阴影</div>
<p class="text">文本阴影</p>
</body>
</html>6. 浏览器兼容性
box-shadow：IE9+、Firefox 4+、Chrome 10+、Safari 5.1+、Opera 10.5+text-shadow：所有主流浏览器支持
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
