本文章主要講述的是漸變色圓角邊框
現(xiàn)有的 CSS 并不能直接實(shí)現(xiàn)漸變圓角邊框，所以這里我所實(shí)現(xiàn)的方案全部都是采用多個(gè) DIV 組合或者是通過偽類實(shí)現(xiàn)。

實(shí)線圓角漸變效果

實(shí)線方式 1

使用偽類實(shí)現(xiàn)

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

實(shí)線方式 2

疊加背景顏色實(shí)現(xiàn)
需要注意背景顏色的兩個(gè)參數(shù) 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
等價(jià)于 background-clip: padding-box
含義：把這塊純色 只畫到 padding 的外邊緣，border 區(qū)域不畫
結(jié)果：border 底下不會(huì)透出這層白色

border-box
等價(jià)于 background-clip: border-box
含義：把漸變 畫到邊框的外邊緣，也就是整個(gè)背景定位區(qū)域（包括 border）
結(jié)果：border 區(qū)域也能看到這條漸變

虛線圓角漸變效果

虛線方式1

使用偽類實(shí)現(xiàn)

不適合做粗邊框
實(shí)現(xiàn)起來比下方的 虛線方式2 簡單，適應(yīng)性好，代碼邏輯也好理解，更改顏色方便。在邊框足夠細(xì)盒子足夠大的時(shí)候，左上角和右下角的這種殘缺效果會(huì)被弱化。

<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 實(shí)現(xiàn)

比 虛線方式 1 要更好，除了左上角鏈接處會(huì)有一點(diǎn)虛線閉環(huán)時(shí)產(chǎn)生的兩個(gè)點(diǎn)很近以外，近乎完美。不過比 虛線方式 1 控制起來要復(fù)雜一些。動(dòng)態(tài)變化效果不是很好

    <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 虛線長度。前一個(gè)數(shù)組是有顏色的長度，后一個(gè)數(shù)字是空白長度 -->
            <!-- x, y 需要設(shè)置為線條寬度的一半 -->
            <!-- 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));
        }