使用CSS伪元素::before和::after可创建无需额外HTML标签的装饰性边框，1. 通过定位与边框属性实现双层边框，外层由::before负偏移扩展；2. 利用伪元素绘制角落三角形实现斜角装饰；3. 使用背景渐变或box-shadow模拟点状边框；4. 结合transform与transition制作悬停动画边框，提升交互视觉效果。
使用CSS伪元素 ::before 和 ::after 可以为元素创建装饰性边框，而无需额外的HTML标签。这种方法灵活且易于控制样式，适合实现创意边框效果，比如双线边框、点缀边框、斜角装饰等。
基本原理
伪元素 ::before 和 ::after 允许你在目标元素的内容前或后插入生成的内容，并通过CSS进行样式控制。结合 position、border、transform 等属性，可以实现丰富的装饰边框效果。
1. 创建双层装饰边框
利用伪元素叠加在元素外围，形成内外两层边框，增强视觉层次。
.decorative-box {
position: relative;
width: 200px;
height: 100px;
background: #fff;
border: 2px solid #007acc;
}
<p>.decorative-box::before {
content: "";
position: absolute;
top: -6px;
left: -6px;
right: -6px;
bottom: -6px;
border: 2px dashed #ff6b6b;
pointer-events: none; /<em> 避免干扰鼠标事件 </em>/
}</p>说明：外层虚线边框由 ::before 生成，通过负偏移扩展到原元素之外，形成“双层”装饰效果。
立即学习“前端免费学习笔记（深入）”；
2. 斜角/切角装饰边框
使用伪元素绘制三角形并定位到角落，模拟切角效果。
.beveled-border {
position: relative;
padding: 20px;
background: #f0f0f0;
}
<p>.beveled-border::before,
.beveled-border::after {
content: "";
position: absolute;
width: 15px;
height: 15px;
}</p><p>.beveled-border::before {
top: 0;
left: 0;
border-top: 3px solid #000;
border-left: 3px solid #000;
}</p><p>.beveled-border::after {
bottom: 0;
right: 0;
border-bottom: 3px solid #000;
border-right: 3px solid #000;
}</p>说明：两个伪元素分别放在左上和右下角，仅显示两条边，形成简洁的L型角装饰。
3. 点状或圆点装饰边框
用 ::before 或 ::after 生成多个小圆点沿边框排列。
.dotted-border {
position: relative;
padding: 20px;
}
<p>.dotted-border::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid transparent;
border-radius: 8px;
background:
repeating-linear-gradient(
45deg,</p><h1>ffcc00,</h1><pre class='brush:php;toolbar:false;'> #ffcc00 10px,
transparent 10px,
transparent 20px
);z-index: -1; pointer-events: none; }
说明：虽然这里用了背景渐变，但也可以用 ::after 绘制多个小圆点（如用 box-shadow 模拟）环绕边框。
4. 动态悬停边框动画
结合伪元素和 transition 实现鼠标悬停时的边框动画。
.animated-border {
position: relative;
padding: 20px;
display: inline-block;
}
<p>.animated-border::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border: 2px solid #00d1b2;
border-radius: 6px;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}</p><p>.animated-border:hover::before {
transform: scaleX(1);
}</p>说明：初始状态伪元素被压缩，悬停时横向展开，形成“划入”动画边框。
基本上就这些。通过合理使用 ::before 和 ::after，你可以实现各种轻量又美观的装饰边框，同时保持HTML结构干净。关键是定位准确、层级清晰，并注意 pointer-events 的设置避免干扰交互。不复杂但容易忽略细节。
