CSS 圆角渐变边框

本文章主要讲述的是渐变色圆角边框
现有的 CSS 并不能直接实现渐变圆角边框，所以这里我所实现的方案全部都是采用多个 DIV 组合或者是通过伪类实现。

实线圆角渐变效果

实线方式 1

使用伪类实现

<div class="border"><h1>hello</h1></div>

        .border {
            --border-width: 5px;
            --rounded: 50px;

            width: 700px;
            height: 320px;
            position: relative;
            background: #fff7eb;
            border-radius: var(--rounded);
        }
        .border::before {
            content: '';
            background: linear-gradient(135deg, red, blue);
            position: absolute;
            top: calc(0px - var(--border-width));
            right: calc(0px - var(--border-width));
            bottom: calc(0px - var(--border-width));
            left: calc(0px - var(--border-width));
            border-radius: calc(var(--rounded) + var(--border-width));
            z-index: -1;
        }

实线方式 2

叠加背景颜色实现
需要注意背景颜色的两个参数 padding-box, border-box

        .border {
            --border-width: 5px;
            --rounded: 50px;

            width: 700px;
            height: 320px;
            border: var(--border-width) solid transparent;
            border-radius: var(--rounded);
            background:
                    linear-gradient(#fff7eb, #fff7eb) padding-box,
                    linear-gradient(135deg, red, blue) border-box;
        }

padding-box
等价于 background-clip: padding-box
含义：把这块纯色 只画到 padding 的外边缘，border 区域不画
结果：border 底下不会透出这层白色

border-box
等价于 background-clip: border-box
含义：把渐变 画到边框的外边缘，也就是整个背景定位区域（包括 border）
结果：border 区域也能看到这条渐变

虚线圆角渐变效果

虚线方式1

使用伪类实现

不适合做粗边框
实现起来比下方的 虚线方式2 简单，适应性好，代码逻辑也好理解，更改颜色方便。在边框足够细盒子足够大的时候，左上角和右下角的这种残缺效果会被弱化。

<div class="border2"><h1>hello</h1></div>

.border2 {
            --border-width: 5px;
            --rounded: 50px;
            --border-dot-line: calc(2px + var(--border-width));

            width: 700px;
            height: 320px;
            position: relative;
            background: #fff7eb;
            border-radius: var(--rounded);
        }
        .border2::before {
            content: '';
            background: linear-gradient(135deg, red, blue);
            position: absolute;
            top: calc(0px - var(--border-width));
            right: calc(0px - var(--border-width));
            bottom: calc(0px - var(--border-width));
            left: calc(0px - var(--border-width));
            border-radius: calc(var(--rounded) + var(--border-width));
            z-index: -1;
            -webkit-mask: repeating-linear-gradient(
                    -45deg,
                    black 0,
                    black calc(var(--border-dot-line)),
                    transparent calc(var(--border-dot-line)),
                    transparent calc(var(--border-dot-line) * 2 + 1px)
            );
        }

虚线方式 2

使用 SVG 实现

比 虚线方式 1 要更好，除了左上角链接处会有一点虚线闭环时产生的两个点很近以外，近乎完美。不过比 虚线方式 1 控制起来要复杂一些。动态变化效果不是很好

    <div class="border3">
        <svg class="svg-content" viewBox="0 0 100% 100%" preserveAspectRatio="none">
            <!-- 边框渐变颜色 -->
            <defs>
                <linearGradient id="strokeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" stop-color="red" />
                    <stop offset="100%" stop-color="blue" />
                </linearGradient>
            </defs>
            <!-- 边框线条样式 -->
            <!-- stroke-dasharray 虚线长度。前一个数组是有颜色的长度，后一个数字是空白长度 -->
            <!-- x, y 需要设置为线条宽度的一半 -->
            <!-- stroke-width 线条宽度 -->
            <rect
                class="svg-rect"
                stroke-dasharray="4,4"
                stroke-opacity="1"
                x="2.5"
                y="2.5"
                rx="50px" ry="50px"
                style="fill: transparent; stroke-width: var(--border-width);  stroke: url(#strokeGradient);"
            />
        </svg>
        <div class="border3-wrapper">
            <h1>hello</h1>
        </div>
    </div>

        .border3 {
            --border-width: 5px;
            --rounded: 50px;

            width: 700px;
            height: 320px;
            position: relative;
            overflow: hidden;


        }
        .border3-wrapper {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            right: 0;
            bottom: 0;
            transform: translate(-50%, -50%);
            width: calc(100% - var(--border-width) * 2);
            height: calc(100% - var(--border-width) * 2);
            border-radius: calc(var(--rounded) - var(--border-width));
            background: #fff7eb;
        }
        .svg-content {
            z-index: -1;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .svg-rect {
            width: calc(100% - var(--border-width));
            height: calc(100% - var(--border-width));
        }