CSS 实现圆角渐变边框
示例详见:CodePen demo
前情提要
用css实现圆角渐变边框,但border-image
与border-radius
属性不能同时生效。
tips: 每种方式都有其特点和适用场景。可以根据具体需求和浏览器兼容性选择合适的实现方式。若仅需实现渐变边框,则用border-image
属性即可,详情见:MDN border-image
CSS变量
定义一些CSS变量,用于控制容器的尺寸和边框圆角:
: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结构
<div class="container">
<div class="content">内容文本</div>
</div>
CSS代码
.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结构
<div class="container">内容文本</div>
CSS代码
.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结构
<div class="container">内容文本</div>
CSS代码
.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;
}