<think>我们想要
实现盒子的模糊
边框效果。根据引用[1]和引用[4]中的思路，我们可以考虑使用伪元素或者额外的遮罩层来创建模糊效果，并且结合`backdrop
-filter`属性。但是注意，用户要求的是“模糊
边框”，而不是整个背景模糊。因此，我们需要
实现的是
边框部分模糊，而内容区域不模糊。
然而，
CSS中并没有直接设置
边框模糊的属性。我们可以通过一些技巧来
实现类似效果，例如：
1. 使用两个
重叠的盒子，外层盒子模糊，内层盒子不模糊，通过调整内层盒子的尺寸和位置，只露出外层的
边框部分（即模糊
边框）。
2. 使用伪元素，将伪元素设置为比内容盒子稍大，然后对伪元素应用模糊效果，这样伪元素就形成了
边框，再通过`overflow: hidden`将超出内容盒子的部分隐藏，只露出
边框部分。
但是，由于模糊效果通常会影响到整个元素，包括内容，所以我们需要将内容与
边框分开处理。
这里提供一种
实现思路：
步骤：
1. 创建一个父容器，设置其定位为相对定位（relative），并设置一定的内边距（padding）作为
边框的宽度。
2. 在父容器内创建两个子元素：
- 一个作为背景层（绝对定位，覆盖整个父容器，包括padding区域），并对其应用模糊效果。
- 另一个作为内容层（相对定位，位于背景层之上，并且不模糊），并且设置背景颜色（如果不需要内容区域透明的话）或者也可以透明，但这样就会看到背景层的模糊。
但是，如果希望内容区域不模糊，而
边框（即父容器的padding区域）显示为模糊效果，我们可以这样做：
结构：
```html
<div class="blur
-border
-box">
<div class="blur
-background"></div>
<div class="content">
这里是内容
</div>
</div>
```
样式：
```
css
.blur
-border
-box {
position: relative;
padding: 10px; /*
边框的宽度 */
/* 其他样式，如宽高等 */
}
.blur
-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: inherit; /* 继承父元素的背景，或者设置特定的背景 */
filter: blur(10px); /* 模糊效果 */
z
-index: 1;
}
.content {
position: relative;
z
-index: 2; /* 确保内容在背景之上 */
background: white; /* 如果内容区域不需要透明，可以设置背景色 */
/* 其他内容样式 */
}
```
但是，这种方法有一个
问题：模糊背景层会继承父元素的背景，而父元素可能没有背景，那么我们就需要让父元素能够获取到页面背景。这通常需要将父元素设置为透明，然后通过伪元素或者背景层来捕获页面背景并模糊。
另一种更简洁的方式是使用backdrop
-filter，但注意backdrop
-filter是对元素背后的内容进行模糊，而不是元素本身。因此，我们可以利用它来创建
边框模糊效果：
思路：
1. 将内容盒子放在一个相对定位的容器中。
2. 使用容器的伪元素作为
边框，将伪元素设置为比内容盒子大（即形成
边框），然后对伪元素应用backdrop
-filter。
结构：
```html
<div class="blur
-border
-box">
<div class="content">
这里是内容
</div>
</div>
```
样式：
```
css
.blur
-border
-box {
position: relative;
/* 设置容器的大小，由内容决定，也可以固定 */
display: in
line
-block;
padding: 10px; /*
边框的宽度 */
}
/* 创建模糊
边框的伪元素 */
.blur
-border
-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop
-filter: blur(5px);
z
-index: 0;
border
-radius: 10px; /* 如果需要圆角 */
}
.content {
position: relative;
z
-index: 1;
background: rgba(255, 255, 255, 0.5); /* 半透明背景，这样可以看到一些模糊效果，也可以不透明 */
/* 其他样式 */
}
```
但是，这样伪元素会覆盖整个容器，包括内容区域。如果我们只希望
边框部分模糊，内容区域不模糊，那么我们可以将伪元素设置为比内容区域大，然后通过overflow:hidden将超出的部分隐藏（即只显示
边框部分）。
调整后的方法：
结构不变，样式如下：
```
css
.blur
-border
-box {
position: relative;
display: in
line
-block;
/* 设置
边框的宽度 */
--border
-width: 10px;
/* 设置圆角 */
--border
-radius: 10px;
overflow: hidden; /* 关键：将超出部分隐藏，这样伪元素超出的模糊部分就被隐藏了 */
border
-radius: var(
--border
-radius);
}
.blur
-border
-box::before {
content: '';
position: absolute;
/* 让伪元素比容器大，大出的部分就是
边框的宽度，但由于容器overflow:hidden，只会显示容器内的部分，即
边框 */
top: calc(
-1 * var(
--border
-width));
left: calc(
-1 * var(
--border
-width));
right: calc(
-1 * var(
--border
-width));
bottom: calc(
-1 * var(
--border
-width));
backdrop
-filter: blur(5px);
z
-index: 0;
/* 注意：这里伪元素的圆角要比容器大，因为容器有圆角，为了
边框的圆角效果，伪元素圆角要加上
边框宽度 */
border
-radius: calc(var(
--border
-radius) + var(
--border
-width));
}
.content {
position: relative;
z
-index: 1;
background: white; /* 内容区域背景，不透明 */
margin: var(
--border
-width); /* 内容区域与
边框之间留出空间，这样
边框可见 */
border
-radius: var(
--border
-radius); /* 内容区域的圆角 */
/* 其他样式 */
}
```
解释：
1. 容器设置了overflow: hidden，并且有圆角。
2. 伪元素被设置为比容器大（每个方向大一个
边框宽度），然后应用了backdrop
-filter模糊效果。
3. 由于容器有overflow:hidden，所以伪元素超出的部分被隐藏，只显示容器内的部分，即
边框部分（因为内容区域有margin，所以
边框部分就是伪元素在容器内显示的部分）。
4. 内容区域设置了margin，这样在内容周围就留出了空间，这个空间正好显示伪元素的模糊背景（即
边框）。
但是，这种方法需要内容区域有背景色，否则内容区域下面的伪元素模糊效果也会被看到（因为伪元素在内容区域下面，且覆盖整个容器，包括内容区域位置，但内容区域位置被内容盒子覆盖，且内容盒子有背景色，所以看不到模糊）。
注意：backdrop
-filter是模糊元素背后的内容，所以需要确保容器后面有内容（比如背景图片或颜色等），否则模糊效果不明显。
如果希望内容区域透明，那么就会看到伪元素在内容区域也有模糊，这样就不是只有
边框模糊了。所以，这种方法适用于内容区域不透明的情况。
另外，我们也可以使用两个伪元素：一个用于整个背景（包括
边框和内容区域）的模糊，另一个用于覆盖内容区域（不模糊）以形成
边框效果。但这样内容区域就不能透明了。
考虑到兼容性，backdrop
-filter在较新的浏览器中支持，如果需要兼容旧浏览器，可以使用第一种方法（使用额外的背景层，并对其应用filter: blur()，但注意filter: blur()是模糊元素本身，所以需要这个背景层有背景图片，并且与父容器后面的背景一致，这通常需要JavaScript动态获取背景，
实现起来比较复杂）。
因此，这里我们推荐使用backdrop
-filter的方法，并假设内容区域是不透明的。
下面给出一个完整的示例代码：
注意：为了看到效果，我们给body设置一个背景图片，然后应用模糊
边框的盒子放在中间。</think>#
CSS实现模糊
边框效果详解
在
CSS中
实现盒子的模糊
边框效果有多种方法，下面我将详细介绍三种最实用的技术方案，并提供完整
实现代码。
## 方法一：使用伪元素创建模糊
边框（推荐）
```html
<!DOCTYPE html>
<html lang="zh
-CN">
<head>
<meta charset="UTF
-8">
<meta name="viewport" content="width=device
-width, initial
-scale=1.0">
<title>
CSS模糊
边框效果</title>
<style>
* {
margin: 0;
padding: 0;
box
-sizing: border
-box;
}
body {
min
-height: 100vh;
display: flex;
flex
-direction: column;
a
lign
-items: center;
justify
-content: center;
background:
linear
-gradient(135deg, #6a11cb, #2575fc);
font
-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans
-serif;
padding: 20px;
color: white;
}
.container {
display: flex;
flex
-wrap: wrap;
justify
-content: center;
gap: 40px;
max
-width: 1200px;
margin: 30px 0;
}
.box {
position: relative;
width: 300px;
height: 300px;
border
-radius: 16px;
overflow: hidden;
box
-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease;
}
.box:hover {
transform: translateY(
-10px);
}
.box
-content {
position: relative;
height: 100%;
display: flex;
flex
-direction: column;
justify
-content: center;
a
lign
-items: center;
padding: 30px;
text
-a
lign: center;
z
-index: 2;
}
h2 {
font
-size: 1.8rem;
margin
-bottom: 15px;
text
-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
p {
line
-height: 1.6;
font
-size: 1.1rem;
}
/* 方法1：伪元素模糊
边框 */
.blur
-border
-1::before {
content: '';
position: absolute;
top:
-10px;
left:
-10px;
right:
-10px;
bottom:
-10px;
background: rgba(0, 0, 0, 0.7);
filter: blur(20px);
z
-index: 1;
}
/* 方法2：backdrop
-filter模糊
边框 */
.blur
-border
-2 {
border: 10px so
lid transparent;
box
-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.blur
-border
-2::before {
content: '';
position: absolute;
top:
-10px;
left:
-10px;
right:
-10px;
bottom:
-10px;
backdrop
-filter: blur(10px);
-webkit
-backdrop
-filter: blur(10px);
z
-index: 1;
border
-radius: 20px;
}
/* 方法3：双重盒子模糊
边框 */
.blur
-border
-3 {
overflow: visible;
}
.blur
-border
-3 .blur
-wrapper {
position: absolute;
top:
-15px;
left:
-15px;
right:
-15px;
bottom:
-15px;
background: rgba(0, 0, 0, 0.6);
filter: blur(15px);
z
-index: 0;
border
-radius: 20px;
}
.blur
-border
-3 .box
-content {
background: rgba(30, 30, 50, 0.8);
border
-radius: 16px;
}
.code
-examples {
background: rgba(0, 0, 0, 0.4);
backdrop
-filter: blur(5px);
border
-radius: 12px;
padding: 25px;
max
-width: 800px;
margin
-top: 40px;
width: 100%;
}
pre {
background: rgba(20, 20, 30, 0.9);
padding: 20px;
border
-radius: 8px;
overflow
-x: auto;
font
-family: 'Courier New', monospace;
color: #f8f8f2;
line
-height: 1.5;
margin: 15px 0;
}
.notes {
margin
-top: 20px;
padding: 15px;
background: rgba(0, 0, 0, 0.3);
border
-radius: 8px;
}
@media (max
-width: 768px) {
.container {
flex
-direction: column;
a
lign
-items: center;
}
.box {
width: 100%;
max
-width: 400px;
}
}
</style>
</head>
<body>
<h1>
CSS模糊
边框效果
实现</h1>
<p>三种不同的技术方案
实现模糊
边框效果</p>
<div class="container">
<div class="box blur
-border
-1">
<div class="box
-content">
<h2>方法1</h2>
<p>使用伪元素创建模糊
边框</p>
<p>通过::before伪元素扩大尺寸并应用模糊效果</p>
</div>
</div>
<div class="box blur
-border
-2">
<div class="box
-content">
<h2>方法2</h2>
<p>使用backdrop
-filter</p>
<p>现代浏览器支持的高性能模糊方案</p>
</div>
</div>
<div class="box blur
-border
-3">
<div class="blur
-wrapper"></div>
<div class="box
-content">
<h2>方法3</h2>
<p>双重盒子
实现模糊
边框</p>
<p>兼容性更好的传统方案</p>
</div>
</div>
</div>
<div class="code
-examples">
<h2>核心代码
实现</h2>
<h3>方法1: 伪元素
实现</h3>
<pre><code>.blur
-border::before {
content: '';
position: absolute;
top:
-10px; /*
边框宽度 */
left:
-10px;
right:
-10px;
bottom:
-10px;
background: rgba(0, 0, 0, 0.7); /*
边框颜色和透明度 */
filter: blur(20px); /* 模糊强度 */
z
-index: 1;
}</code></pre>
<h3>方法2: backdrop
-filter
实现</h3>
<pre><code>.blur
-border {
border: 10px so
lid transparent; /* 定义
边框区域 */
}
.blur
-border::before {
content: '';
position: absolute;
top:
-10px;
left:
-10px;
right:
-10px;
bottom:
-10px;
backdrop
-filter: blur(10px); /* 背景模糊 */
-webkit
-backdrop
-filter: blur(10px); /* Safari支持 */
z
-index: 1;
}</code></pre>
<h3>方法3: 双重盒子
实现</h3>
<pre><code><div class="box">
<div class="blur
-wrapper"></div> /* 模糊
边框层 */
<div class="content">...</div> /* 内容层 */
</div>
.blur
-wrapper {
position: absolute;
top:
-15px;
left:
-15px;
right:
-15px;
bottom:
-15px;
background: rgba(0, 0, 0, 0.6);
filter: blur(15px);
z
-index: 0;
}</code></pre>
<div class="notes">
<h3>使用说明与注意事项</h3>
<ul>
<
li>调整<code>top/left/right/bottom</code>的负值可以控制
边框宽度</
li>
<
li>调整<code>blur()</code>函数中的像素值控制模糊强度</
li>
<
li>调整<code>rgba()</code>中的alpha值控制
边框透明度</
li>
<
li>方法2需要现代浏览器支持（Chrome 76+, Firefox 76+, Safari 9+）</
li>
<
li>方法3兼容性最好，适用于旧版浏览器</
li>
<
li>大量使用模糊效果可能影响页面性能，特别是在移动设备上</
li>
</ul>
</div>
</div>
</body>
</html>
```
## 技术方案详解
### 方法一：伪元素
实现模糊
边框
这是最简洁的
实现方式，通过::before伪元素创建比主容器更大的图层，并对其应用模糊效果：
```
css
.blur
-border::before {
content: '';
position: absolute;
top:
-10px; /*
边框宽度 */
left:
-10px;
right:
-10px;
bottom:
-10px;
background: rgba(0, 0, 0, 0.7);
filter: blur(20px);
z
-index: 1;
}
```
**优点**：代码简洁，无需额外HTML元素
**缺点**：旧版浏览器支持有限[^1]
### 方法二：使用backdrop
-filter
现代
CSS提供的更高效模糊方案：
```
css
.blur
-border {
border: 10px so
lid transparent;
}
.blur
-border::before {
content: '';
position: absolute;
top:
-10px;
left:
-10px;
right:
-10px;
bottom:
-10px;
backdrop
-filter: blur(10px);
-webkit
-backdrop
-filter: blur(10px); /* Safari支持 */
z
-index: 1;
}
```
**优点**：性能更好，效果更自然
**缺点**：兼容性要求较高[^1]
### 方法三：双重盒子
实现
最兼容的传统
实现方案：
```html
<div class="box">
<div class="blur
-wrapper"></div>
<div class="content">...</div>
</div>
```
```
css
.blur
-wrapper {
position: absolute;
top:
-15px;
left:
-15px;
right:
-15px;
bottom:
-15px;
background: rgba(0, 0, 0, 0.6);
filter: blur(15px);
z
-index: 0;
}
```
**优点**：最佳浏览器兼容性
**缺点**：需要额外HTML元素[^2]
## 使用建议
1. **现代项目**：优先使用方法2（backdrop
-filter），提供最佳性能和效果
2. **兼容性要求高**：使用方法3（双重盒子）确保旧浏览器支持
3. **调整参数**：
- 增加`blur()`值使
边框更模糊
- 增大负方向的定位值使
边框更宽
- 调整`rgba()`的alpha值改变透明度
4. **性能优化**：避免在移动设备上过度使用模糊效果，特别是低端设备
这些方法都可以
实现美观的模糊
边框效果，根据项目需求和浏览器兼容性要求选择最合适的方案[^1][^2][^3]。
本文介绍了解决HTML中UL列表项(LI)边框重叠问题的方法，通过设置LI元素的margin属性和使用z-index层级控制，实现美观且响应式的边框效果。
扫一扫
541
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
