怎么用CSS制作一個(gè)帶有漸變邊框的圓

發(fā)布時(shí)間：2021-08-27 17:17:53 來(lái)源：億速云閱讀：142 作者：chen 欄目：web開發(fā)

這篇文章主要介紹“怎么用CSS制作一個(gè)帶有漸變邊框的圓”，在日常操作中，相信很多人在怎么用CSS制作一個(gè)帶有漸變邊框的圓問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么用CSS制作一個(gè)帶有漸變邊框的圓”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

首先我給大家簡(jiǎn)單說(shuō)一下實(shí)現(xiàn)思路：我將創(chuàng)建兩個(gè) div，一個(gè)是類名為outer_circle 的外部 div，另一個(gè)是類名為inner_circle 的內(nèi)部 div ；外部 div 包含帶有漸變顏色的大圓圈，內(nèi)部 div 包含一個(gè)白色小圓圈，作為圓圈的內(nèi)端，創(chuàng)建圓圈的邊界。

下面直接上完整代碼：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer_circle {
            position: relative;
            margin: 50px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: #ffffff;
        }

        .inner_circle {
            background-image: linear-gradient(
                    to bottom, rgb(123, 93, 255) 0%,
                    rgb(56, 225, 255) 100%);
            content: '';
            position: absolute;
            top: -20px;
            bottom: -20px;
            right: -20px;
            left: -20px;
            z-index: -1;
            border-radius: inherit;
        }
    </style>
</head>

<body>

<div class="outer_circle">
    <div class="inner_circle"></div>
</div>
</body>

</html>

效果如下圖所示：

怎么用CSS制作一個(gè)帶有漸變邊框的圓

在上述代碼中我們主要通過(guò)使用CSS linear-gradient()函數(shù)繪制一個(gè)帶有漸變邊框的圓，linear-gradient() 函數(shù)的作用就是創(chuàng)建一個(gè)表示兩種或多種顏色線性漸變的圖片。

linear-gradient()函數(shù)語(yǔ)法如：

 .class_name { background-image: linear-gradient(direction, color1, color2 }

參數(shù)：

$direction：指定漸變移動(dòng)的方向。

$color1：指定第一個(gè)色標(biāo)。

$color2：它指定第二個(gè)色標(biāo)。

其他用法表示：

/* 從上到下，藍(lán)色漸變到紅色 */
linear-gradient(blue, red);
/* 漸變軸為45度，從藍(lán)色漸變到紅色 */
linear-gradient(45deg, blue, red);
/* 從右下到左上、從藍(lán)色漸變到紅色 */
linear-gradient(to left top, blue, red);
/* 從下到上，從藍(lán)色開始漸變、到高度40%位置是綠色漸變開始、最后以紅色結(jié)束 */
linear-gradient(0deg, blue, green 40%, red);

到此，關(guān)于“怎么用CSS制作一個(gè)帶有漸變邊框的圓”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

向AI問一下細(xì)節(jié)

怎么用CSS制作一個(gè)帶有漸變邊框的圓

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽