CSS 实现圆角渐变边框
前情提要
用css实现圆角渐变边框，但border-image与border-radius属性不能同时生效。
css实现圆角渐变边框tips： 每种方式都有其特点和适用场景。可以根据具体需求和浏览器兼容性选择合适的实现方式。若仅需实现渐变边框，则用border-image属性即可，详情见：MDN border-image
CSS变量
定义一些CSS变量，用于控制容器的尺寸和边框圆角：
代码语言：javascript复制:root {
--outside-border-radius:10px;
--outside-size:200px;
--border-size:2px;
--content-size: calc(var(--outside-size) - var(--border-size) * 2);
--content-border-radius: calc(var(--outside-border-radius) - var(--border-size));
}方式一：使用伪元素与动画，实现圆角动态渐变边框
使用伪元素 ::before 创建一个覆盖整个容器的渐变背景，并通过CSS动画实现背景的旋转效果，从而形成动态渐变边框。详见CodePen demo
实现要点
- 伪元素
::before：用来创建渐变背景。 overflow: hidden：隐藏渐变背景超出的部分，形成边框效果。- 动画
rotate-full：使渐变背景旋转，创建动态效果。
HTML结构
代码语言：javascript复制 <div class="container">
<div class="content">内容文本</div>
</div>CSS代码
代码语言：javascript复制.container {
width: var(--outside-size);
height: var(--outside-size);
border-radius: var(--outside-border-radius);
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin: 50px auto;
overflow: hidden;
}
.content {
border-radius: var(--content-border-radius);
width: var(--content-size);
height: var(--content-size);
font-size: 16px;
font-weight: 600;
line-height: normal;
text-align: center;
letter-spacing: 0;
color: #333;
background: lightcyan;
display:flex;
justify-content:center;
flex-direction:column;
}
.container::before {
content: '';
position: absolute;
z-index: -1;
left: -50%;
top: -50%;
width:200%;
height:200%;
background: conic-gradient(#3c89f5, #0f3, #fe3, #3c89f5);
/* 在2秒内完成一整圈的匀速旋转并不断重复 */
animation: rotate-full 2s linear infinite;
}
@keyframes rotate-full {
100% {
transform: rotate(1turn);
}
}方式二：通过伪元素设置渐变背景，通过调整伪元素位置，形成边框效果
通过伪元素 ::before 在容器内创建一个渐变边框，通过调整伪元素的位置和大小来形成边框效果。
实现要点
- 伪元素
::before：用来创建渐变边框。 - 位置调整：通过
left, top, bottom, right属性调整伪元素位置，形成边框效果。
HTML结构
代码语言：javascript复制 <div class="container">内容文本</div>CSS代码
代码语言：javascript复制.container {
width: var(--outside-size);
height: var(--outside-size);
border-radius: var(--outside-border-radius);
font-size: 16px;
font-weight: 600;
text-align: center;
color: #333;
background: lightcyan;
display: flex;
justify-content: center;
flex-direction: column;
position: relative;
}
.container::before {
content: '';
position: absolute;
z-index: -1;
left: calc(-1 * var(--border-size));
top: calc(-1 * var(--border-size));
bottom: calc(-1 * var(--border-size));
right: calc(-1 * var(--border-size));
background: conic-gradient(#3c89f5, #0f3, #fe3, #3c89f5);
border-radius: var(--outside-border-radius);
}方式三：使用遮罩技术
通过遮罩技术 -webkit-mask 实现渐变边框效果，使用伪元素 ::before 创建渐变背景，结合遮罩技术控制边框的显示。
实现要点
- 伪元素
::before：创建渐变背景。 - 遮罩技术
-webkit-mask：控制边框效果，通过遮罩技术显示边框。 padding：用于设置边框的宽度。
缺点：
- -webkit-mask 属性在某些浏览器上可能兼容性较差。
- 实现较为复杂，代码不够直观。
HTML结构
代码语言：javascript复制 <div class="container">内容文本</div>CSS代码
代码语言：javascript复制.container {
width: var(--outside-size);
height: var(--outside-size);
border-radius: var(--outside-border-radius);
font-size: 16px;
font-weight: 600;
text-align: center;
color: #333;
background: lightcyan;
display: flex;
justify-content: center;
flex-direction: column;
position: relative;
z-index: 2;
}
.container::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: var(--outside-border-radius);
background: conic-gradient(#3c89f5, #0f3, #fe3, #3c89f5);
padding: var(--border-size);
box-sizing: border-box;
-webkit-mask:
linear-gradient(#fff 0 100%) content-box,
linear-gradient(#fff 0 100%);
-webkit-mask-composite: xor;
}
