css实现圆角渐变边框

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;
}