当前位置：首页 > news >正文

CSS Border Effects 边框效果详解

news 2026/5/27 23:54:00

CSS Border Effects 边框效果详解

一、边框基础

CSS 边框是构建网页布局和视觉效果的基础。除了基本的实线边框，CSS 还支持多种高级边框效果。

1.1 基本边框属性

.element { border-width: 2px; border-style: solid; border-color: #ccc; /* 简写 */ border: 2px solid #ccc; }

1.2 边框样式

.element { border-style: none; /* 无边框 */ border-style: solid; /* 实线 */ border-style: dashed; /* 虚线 */ border-style: dotted; /* 点线 */ border-style: double; /* 双线 */ border-style: groove; /* 凹槽 */ border-style: ridge; /* 凸槽 */ border-style: inset; /* 内凹 */ border-style: outset; /* 外凸 */ }

二、圆角边框

2.1 基本圆角

.element { border-radius: 4px; border-radius: 8px; border-radius: 50%; /* 圆形 */ }

2.2 独立圆角

.element { border-top-left-radius: 4px; border-top-right-radius: 8px; border-bottom-right-radius: 4px; border-bottom-left-radius: 8px; /* 简写 */ border-radius: 4px 8px 4px 8px; /* 左上 右上 右下 左下 */ }

2.3 椭圆圆角

.element { border-radius: 10px / 5px; /* 水平半径 / 垂直半径 */ border-radius: 50% / 30%; /* 椭圆 */ }

2.4 实战案例：胶囊按钮

.btn { padding: 8px 24px; border-radius: 9999px; /* 超大圆角 */ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; }

三、渐变边框

3.1 使用 background-clip 实现

.element { border: 4px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #667eea, #764ba2) border-box; }

3.2 带圆角的渐变边框

.element { border: 4px solid transparent; border-radius: 16px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #667eea, #764ba2) border-box; }

3.3 虚线渐变边框

.element { border: 2px dashed transparent; border-radius: 8px; background: linear-gradient(#fff, #fff) padding-box, repeating-linear-gradient( -45deg, #667eea, #667eea 5px, #764ba2 5px, #764ba2 10px ) border-box; }

四、多重边框

4.1 使用 box-shadow

.element { box-shadow: 0 0 0 2px #667eea, 0 0 0 4px #764ba2, 0 0 0 6px #f093fb; }

4.2 使用 outline

.element { border: 2px solid #667eea; outline: 2px solid #764ba2; outline-offset: 2px; }

4.3 使用伪元素

.element { position: relative; border: 2px solid #667eea; } .element::before { content: ''; position: absolute; inset: -4px; border: 2px solid #764ba2; border-radius: inherit; pointer-events: none; }

五、边框动画

5.1 边框颜色动画

@keyframes borderColor { 0%, 100% { border-color: #667eea; } 50% { border-color: #764ba2; } } .element { border: 3px solid #667eea; animation: borderColor 3s ease-in-out infinite; }

5.2 边框宽度动画

@keyframes borderWidth { 0%, 100% { border-width: 2px; } 50% { border-width: 6px; } } .element { border: 2px solid #667eea; animation: borderWidth 2s ease-in-out infinite; }

5.3 边框旋转动画

@keyframes borderRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .element::before { content: ''; position: absolute; inset: -4px; border: 2px solid #667eea; border-radius: inherit; animation: borderRotate 3s linear infinite; }

六、创意边框效果

6.1 缺口边框

.notched-border { position: relative; border: 2px solid #667eea; } .notched-border::before { content: ''; position: absolute; top: -2px; left: 20px; width: 40px; height: 8px; background: #fff; transform: translateY(-50%); }

6.2 渐入边框

.fade-border { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, transparent, #667eea, transparent) border-box; }

6.3 发光边框

.glow-border { border: 2px solid #667eea; box-shadow: 0 0 5px #667eea, 0 0 10px #667eea, 0 0 20px rgba(102, 126, 234, 0.5); }

6.4 扫描线边框

.scanline-border { position: relative; border: 2px solid #667eea; } .scanline-border::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: linear-gradient( 90deg, transparent, rgba(102, 126, 234, 0.5), transparent ); background-size: 200% 100%; animation: scanline 2s linear infinite; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; } @keyframes scanline { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

七、边框与布局

7.1 边框盒模型

.element { box-sizing: border-box; /* 边框包含在宽度内 */ width: 200px; border: 2px solid #667eea; padding: 16px; }

7.2 响应式边框

.element { border-width: clamp(2px, 0.5vw, 4px); }

八、实战案例：卡片边框效果

.card { position: relative; padding: 24px; background: #fff; border-radius: 16px; overflow: hidden; } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #667eea, #764ba2, #f093fb); } .card::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(102, 126, 234, 0.1); border-radius: inherit; pointer-events: none; } .card:hover::after { border-color: rgba(102, 126, 234, 0.3); transition: border-color 0.3s ease; }