Border 圆角边框

border 圆角渐变边框，实现方式

方式 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

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

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

border 圆角渐变虚线边框，实现方式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));
        }