极客教程CSS边框阴影border-shadow
CSS边框阴影是一种常用的样式效果，可以为元素添加立体感和视觉层次。通过设置不同的属性值，可以实现不同类型的边框阴影效果。本文将详细介绍CSS边框阴影的使用方法和示例代码。
1. box-shadow属性
box-shadow属性用于为元素添加阴影效果。语法如下：
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow：水平阴影的位置，可以为正值（向右偏移）或负值（向左偏移）。v-shadow：垂直阴影的位置，可以为正值（向下偏移）或负值（向上偏移）。blur：模糊半径，值越大阴影越模糊。spread：阴影的尺寸，可以为正值（扩大阴影）或负值（缩小阴影）。color：阴影的颜色。inset：可选值，表示阴影在边框内部。
示例代码：
.shadow {
width: 200px;
height: 100px;
background-color: #f0f0f0;
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
}
<div class="shadow"></div>
效果如下：
<div class="shadow"></div>
2. text-shadow属性
text-shadow属性用于为文本添加阴影效果。语法如下：
text-shadow: h-shadow v-shadow blur color;
h-shadow：水平阴影的位置。v-shadow：垂直阴影的位置。blur：模糊半径。color：阴影的颜色。
示例代码：
.text-shadow {
font-size: 24px;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}
<p class="text-shadow">Geek Docs</p>
效果如下：
<p class="text-shadow">Geek Docs</p>
3. border-shadow属性
border-shadow属性是一种自定义属性，用于为元素的边框添加阴影效果。需要结合::before和::after伪元素来实现。示例代码如下：
.border-shadow {
position: relative;
width: 200px;
height: 100px;
background-color: #f0f0f0;
}
.border-shadow::before,
.border-shadow::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
}
.border-shadow::before {
top: -5px;
left: -5px;
}
.border-shadow::after {
bottom: -5px;
right: -5px;
}
<div class="border-shadow"></div>
效果如下：
<div class="border-shadow"></div>
4. 多重阴影效果
可以通过逗号分隔多个阴影值，实现多重阴影效果。示例代码如下：
.multiple-shadow {
width: 200px;
height: 100px;
background-color: #f0f0f0;
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5),
-5px -5px 10px 0px rgba(255, 0, 0, 0.5);
}
<div class="multiple-shadow"></div>
效果如下：
<div class="multiple-shadow"></div>
5. 内阴影效果
通过设置inset关键字，可以实现内阴影效果。示例代码如下：
.inner-shadow {
width: 200px;
height: 100px;
background-color: #f0f0f0;
box-shadow: inset 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
}
<div class="inner-shadow"></div>
效果如下：
<div class="inner-shadow"></div>
6. 阴影颜色透明度
可以通过设置rgba()函数来调整阴影颜色的透明度。示例代码如下：
.shadow-opacity {
width: 200px;
height: 100px;
background-color: #f0f0f0;
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
}
<div class="shadow-opacity"></div>
效果如下：
<div class="shadow-opacity"></div>
7. 阴影模糊效果
通过调整blur值可以实现不同程度的阴影模糊效果。示例代码如下：
.shadow-blur {
width: 200px;
height: 100px;
background-color: #f0f0f0;
box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.5);
}
<div class="shadow-blur"></div>
效果如下：
<div class="shadow-blur"></div>
8. 阴影尺寸调整
通过调整spread值可以改变阴影的尺寸。示例代码如下：
.shadow-spread {
width: 200px;
height: 100px;
background-color: #f0f0f0;
box-shadow: 5px 5px 10px 10px rgba(0, 0, 0, 0.5);
}
<div class="shadow-spread"></div>
效果如下：
<div class="shadow-spread"></div>
9. 阴影位置调整
通过调整h-shadow和v-shadow值可以改变阴影的位置。示例代码如下：
.shadow-position {
width: 200px;
height: 100px;
background-color: #f0f0f0;
box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.5);
}
<div class="shadow-position"></div>
效果如下：
<div class="shadow-position"></div>
10. 阴影组合效果
可以通过组合不同的阴影属性值，实现丰富多彩的阴影效果。示例代码如下：
.combined-shadow {
width: 200px;
height: 100px;
background-color: #f0f0f0;
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5),
-5px -5px 10px 0px rgba(255, 0, 0, 0.5),
inset 0 0 10px rgba(0, 255, 0, 0.5);
}
<div class="combined-shadow"></div>
效果如下：
<div class="combined-shadow"></div>
11. 阴影动画效果
可以通过CSS动画实现阴影的动态效果。示例代码如下：
@keyframes shadow-animation {
0% {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
50% {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
100% {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
}
.shadow-animation {
width: 200px;
height: 100px;
background-color: #f0f0f0;
animation: shadow-animation 2s infinite;
}
<div class="shadow-animation"></div>
效果如下：
<div class="shadow-animation"></div>
12. 阴影混合模式
可以通过mix-blend-mode属性实现阴影的混合效果。示例代码如下：
.blend-mode {
width: 200px;
height: 100px;
background-color: #f0f0f0;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
mix-blend-mode: screen;
}
<div class="blend-mode"></div>
效果如下：
<div class="blend-mode"></div>
13. 阴影边框效果
可以通过border属性和box-shadow属性结合实现阴影边框效果。示例代码如下：
.border-shadow {
width: 200px;
height: 100px;
background-color: #f0f0f0;
border: 5px solid transparent;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
<div class="border-shadow"></div>
效果如下：
<div class="border-shadow"></div>
14. 阴影hover效果
可以通过:hover伪类实现鼠标悬停时的阴影效果。示例代码如下：
.hover-shadow {
width: 200px;
height: 100px;
background-color: #f0f0f0;
transition: box-shadow 0.3s;
}
.hover-shadow:hover {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
<div class="hover-shadow"></div>
效果如下：
<div class="hover-shadow"></div>
15. 阴影点击效果
可以通过:active伪类实现点击时的阴影效果。示例代码如下：
.active-shadow {
width: 200px;
height: 100px;
background-color: #f0f0f0;
transition: box-shadow 0.3s;
}
.active-shadow:active {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
<div class="active-shadow"></div>
效果如下：
<div class="active-shadow"></div>
以上就是关于CSS边框阴影的详细介绍和示例代码。通过灵活运用box-shadow、text-shadow和自定义属性等方法，可以为网页元素添加丰富多彩的阴影效果，增强页面的视觉吸引力和立体感。