css效果记录-渐变边框，内容是透明或者高斯模糊
全栈老韩
全栈工程师，擅长iOS App开发、前端（vue、react、nuxt、小程序&Taro）开发、Flutter、React Native、后端（midwayjs、golang、express、koa）开发、docker容器、seo优化等。
这篇文章用来记录我在开发中需要实现的一种css效果，效果是一个div，有渐变颜色的边框，但是中间内容区域是透明或者高斯模糊效果。作为记录，也可以供大家参考。
最终效果
首先我们来看看最后实现的效果图：
上面的效果，需要我们设置相关的css属性，所以我会将我尝试的效果思路列举一下，每一个尝试也是一种类似的css效果，也作为记录。
最终效果的实现，在最后一步。
尝试: 将background分为border box和padding-box
这种方式的思路就是一个div，可以将background分为border和padding的2种box，当然还有content box，那么针对每一个box可以设置颜色渐变。
效果是：
缺陷是padding-box不能设置为透明transparent，因为这种渐变是border包裹范围内background颜色渐变了，
border-box包裹范围内的渐变像是盖在上面。所以如果padding-box是透明或者blur高斯模糊，那么就会漏出全部的border-box的渐变效果。
这种效果的测试代码是：
test_1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test-1</title>
</head>
<body>
<div class="gradient-border"></div>
</body>
<style>
body {
background: rgb(33, 213, 168);
}
.gradient-border {
border-radius: 20px;
border: 10px solid transparent; // border渐变，必须要设置border宽度和颜色transparent.
width: 400px;
height: 200px;
background: linear-gradient(orange) padding-box,
linear-gradient(blue, green) border-box;
overflow: hidden;
/* clip: rect(0px, 400px, 200px, 0px); */
}
</style>
</html>所以这种方式，只能用在padding-box区域中，不显示底下内容的场景。
高斯模糊效果
这里简单实现一个高斯模糊效果，因为在我们的最终效果中，需要有高斯模糊，那么我们可以先看看如何实现高斯模糊效果，根据代码来发散思维。
高斯模糊效果是：
测试代码是：
test_2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="background" id="divB">
<!-- This is Div B -->
<h1>This is Div B</h1>
</div>
<div class="overlay" id="divA">
<!-- This is Div A -->
<p>This is Div A content</p>
</div>
</body>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
}
.background {
position: absolute;
width: 100%;
height: 100%;
background: url("https://picsum.photos/800/600") no-repeat center/cover; // 使用一个随机底图
z-index: 0;
}
.overlay {
position: absolute;
top: 100px;
left: 100px;
width: 300px;
height: 200px;
padding: 20px;
z-index: 1;
border-radius: 15px;
// 高斯模糊效果
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: white;
border: 10px solid rgba(255, 255, 255, 0.3);
}
</style>
</html>从这里面可以看到高斯模糊效果是backdrop-filter来决定的，所以之前的border-box和padding-box尝试是无法应用到这种css属性设置。
那么可以考虑使用:before和:after这2个伪标签，分别设置不同的渐变，当然这确实是可以的。
最终实现代码
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="background" id="divB">
<!-- This is Div B -->
<h1>This is Div B</h1>
</div>
<div class="glass-border" id="divA">
<!-- This is Div A -->
<p>This is Div A content</p>
</div>
</body>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
}
.background {
position: absolute;
width: 100%;
height: 100%;
background: url("https://picsum.photos/800/600") no-repeat center/cover; // 也用一个随机图做底色
z-index: 0;
}
.glass-border {
position: absolute;
top: 100px;
left: 100px;
width: 300px;
height: 200px;
padding: 20px;
z-index: 1;
background: transparent;
color: white;
border-radius: 15px;
position: relative;
}
.glass-border::before { // border渐变色的处理
content: "";
position: absolute;
top: -2px; // 内容是2px的border宽度
left: -2px;
right: -2px;
bottom: -2px;
z-index: -1; // 中间层
border-radius: inherit;
padding: 2px;
background: linear-gradient(135deg, #ff00cc, #3333ff); // 作为border的渐变颜色
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); // 使用mask将叠加效果的中间部分给透明掉
-webkit-mask: linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask-composite: exclude;
-webkit-mask-composite: destination-out;
}
.glass-border::after { // 高斯模糊的处理
content: "";
position: absolute;
top: 0; // 直接是div A的区域设置为高斯模糊
left: 0;
right: 0;
bottom: 0;
border-radius: inherit;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: -2; // 层级置于底部
}
</style>
</html>用于记录，也希望对大家有帮助。
发布于2025-04-23 10:57:30
浏览量37·
大家切记这里的要点：
1. glass-border的z-index为1；
2. glass-border::before的z-index为-1；
3. glass-border::after的z-index为-2；