中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何使用CSS實現圓角漸變邊框

發布時間:2021-01-28 10:28:56 來源:億速云 閱讀:588 作者:小新 欄目:web開發

這篇文章將為大家詳細講解有關如何使用CSS實現圓角漸變邊框,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。

CSS如何實現帶圓角的漸變邊框?下面本篇文章給大家介紹一下使用CSS巧妙實現帶圓角的漸變邊框的幾種方法。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有所幫助。

如何實現下面這個漸變的邊框效果:

如何使用CSS實現圓角漸變邊框

這個問題本身不難,實現的方法也有一些,主要是有一些細節需要注意。

border-image

border-image 是 CSS 規范 CSS Backgrounds and Borders Module Level 3 (最新一版的關于 background 和 border 的官方規范) 新增的一個屬性值。

顧名思義,我們可以給 border 元素添加 image,類似于 background-image,可以是圖片也可以是漸變,不再局限于純色。

使用 border-image 實現漸變邊框

有了 border-image 之后,實現漸變邊框變得很方便

不過多介紹 border-image 的語法,讀者需要自行了解一下。

實現如下:

<div class="border-image"></div>
.border-image {
    width: 200px;
    height: 100px;
    border-radius: 10px;
    border-image-source: linear-gradient(45deg, gold, deeppink);
    border-image-slice: 1;
    border-image-repeat: stretch;
}

上面關于 border-image 的三個屬性可以簡寫為 border-image: linear-gradient(45deg, gold, deeppink) 1;

得到如下結果:

如何使用CSS實現圓角漸變邊框

border-radius 失效

仔細看上面的 Demo,設置了 border-radius: 10px 但是實際表現沒有圓角。使用 border-image 最大的問題在于,設置的 border-radius 會失效。

我們無法得到一個帶圓角的漸變邊框。原因,查看官方規范 W3C 解釋如下:

A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.

為此,我們得另辟蹊徑或者稍加改進,得到帶圓角的漸變邊框。

法一:background-image + 偽元素

第一種方法,我們不再使用 border-image ,而是使用 background-image + 偽元素 的方案,這也是在 border-image 規范沒有出現最常用的方法。

非常簡單,簡單的示意圖如下:

如何使用CSS實現圓角漸變邊框

利用 background-image 實現一個漸變背景,再通過疊加一個白色背景使之形成一個漸變邊框。

CodePen Demo -- bg + overflow 實現漸變邊框

缺點

這個方案有兩個問題,第一個是多使用了兩個元素(當然在這里是 ::before 和 ::after),其次最致命的是,如果要求邊框內的背景是透明的,此方案便行不通了。

法二,使用 background-clip 實現

第二種方法,使用 background-clip: content-box 以及 background-clip: border-box 配合使用。

background-clip:background-clip 設置元素的背景(背景圖片或顏色)是否延伸到邊框下面。它的部分取值和 box-sizing 類似。其中,

  • background-clip: border-box 表示設置的背景 background-image 將延伸至邊框

  • background-clip: content-box 表示設置的背景 background-image 被裁剪至內容區(content box)外沿

這里,我們使用設置兩個 background-image,設置兩個 background-clip ,并且將 border 設置為透明即可:

核心 CSS:

div {
    width: 200px;
    height: 100px;
    border: solid 10px transparent;
    border-radius: 10px;
    background-image: linear-gradient(#fee, #fee),
        linear-gradient(to right, green, gold);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

如何使用CSS實現圓角漸變邊框

因為用到了 background-clip: border-box,所以還需要 background-origin: border-box 使圖案完整顯示,可以嘗試下關掉這個屬性,即可明白為什么需要這樣做。

CodePen Demo -- background-clip 實現漸變邊框

缺點

與第一種方法類似,如果要求邊框內的背景是透明的,此方案便行不通了。

法三:border-image + overflow: hidden

這個方法也很好理解,既然設置了 background-image 的元素的 border-radius 失效。那么,我們只需要給它加一個父容器,父容器設置 overflow: hidden + border-radius 即可:

<div class="border-image-overflow"></div>
.border-image-pesudo {
    position: relative;
    width: 200px;
    height: 100px;
    border-radius: 10px;
    overflow: hidden;
}
 
.border-image-pesudo::before {
    content: "";
    position: absolute;
    width: 200px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 10px solid;
    border-image: linear-gradient(45deg, gold, deeppink) 1;
}

效果如下:

如何使用CSS實現圓角漸變邊框

當然,這里還是多借助了一個元素實現。還有一種方法,可以不使用多余元素實現:

法四:border-image + clip-path

設置了 background-image 的元素的 border-radius 失效。但是在 CSS 中,還有其它方法可以產生帶圓角的容器,那就是借助 clip-path

[clip-path](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path),一個非常有意思的 CSS 屬性。

clip-path CSS 屬性可以創建一個只有元素的部分區域可以顯示的剪切區域。區域內的部分顯示,區域外的隱藏。剪切區域是被引用內嵌的URL定義的路徑或者外部 SVG 的路徑。

簡而言之,這里,我們只需要在 border-image 的基礎上,再利用 clip-path 裁剪出一個帶圓角的矩形容器即可:

<div class="border-image-clip-path"></div>
.border-image-clip-path {
    position: relative;
    width: 200px;
    height: 100px;
    border: 10px solid;
    border-image: linear-gradient(45deg, gold, deeppink) 1;
    clip-path: inset(0 round 10px);
}

解釋一下:clip-path: inset(0 round 10px)

  • clip-path: inset() 是矩形裁剪

  • inset() 的用法有多種,在這里 inset(0 round 10px) 可以理解為,實現一個父容器大小(完全貼合,垂直水平居中于父容器)且 border-radius: 10px 的容器,將這個元素之外的所有東西裁剪掉(即不可見)。

非常完美,效果如下:

如何使用CSS實現圓角漸變邊框

當然,還可以利用 filter: hue-rotate()順手再加個漸變動畫:

如何使用CSS實現圓角漸變邊框

你可以在我 CSS-Inspiration 看到這個例子:

CSS-Inspiration -- 使用 clip-path 和 border-image 實現圓角漸變邊框

關于“如何使用CSS實現圓角漸變邊框”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

css
AI

错那县| 兴文县| 威信县| 大关县| 双柏县| 内丘县| 宝山区| 镇江市| 江都市| 玉山县| 讷河市| 嵊州市| 宝山区| 巴林右旗| 孝义市| 青铜峡市| 桃园县| 南雄市| 上犹县| 土默特左旗| 彰化市| 江阴市| 陆川县| 台东市| 佳木斯市| 静宁县| 南召县| 鹤庆县| 辉南县| 上蔡县| 都安| 新绛县| 淮阳县| 中牟县| 临沂市| 千阳县| 彭山县| 马关县| 蒲江县| 武穴市| 宿松县|