標(biāo)

使用border-image可以設(shè)置漸變色邊框，但是當(dāng)它與border-radius組合使用時(shí)，兩者卻無法兼容。

因此，實(shí)現(xiàn)這個(gè)效果的另一個(gè)思路是：利用兩個(gè)圓角矩形的面積差形成邊框。故可以使用以下方法實(shí)現(xiàn)：

基礎(chǔ)版本

使用嵌套的兩個(gè)div，并設(shè)置父元素的內(nèi)邊距padding以此制造面積差，從而形成邊框的效果。

HTML

復(fù)制代碼

<div class="border-box">    <div class="border-content"></div></div>

CSS

復(fù)制代碼

.border-box{  width: 200px;  background:linear-gradient(0deg,#00135A,#01A1FF);  border-radius: 5px;  padding: 2px;/* 邊框?qū)挾?*/}.border-content{  width: 200px;  height: 100px;  border-radius: 5px;   background-color: white;  }

簡化HTML結(jié)構(gòu)版：使用偽元素

使用偽元素充當(dāng)背景也同樣可以達(dá)到上述效果，注意設(shè)置z-index將偽元素置于內(nèi)容之下

HTML

復(fù)制代碼

<div class="border-content"></div>

CSS

復(fù)制代碼

.border-content{  width: 200px;  height: 100px;  border-radius: 5px;    position: relative;  background-color: white;  }.border-content::before{  content: '';  position: absolute;  top: -2px; right: -2px; bottom: -2px; left: -2px;/* 邊框?qū)挾?*/  border-radius: 5px;   background: linear-gradient(0deg,#00135A,#01A1FF);    z-index: -1;/* 置于內(nèi)容之下 */ }

進(jìn)階版：使用background相關(guān)屬性

給一個(gè)div設(shè)置兩個(gè)不同大小的背景，從而利用兩個(gè)背景制造面積差，也可以實(shí)現(xiàn)上述效果。

• 如何給div設(shè)置兩個(gè)背景？

使用background-image屬性設(shè)置兩組顏色，一組是內(nèi)容顏色，另一組是border邊框顏色，用逗號(hào)隔開。

• 如何將兩個(gè)背景設(shè)置成不同大小？

可以使用background-clip 屬性，該屬性規(guī)定了背景的繪制區(qū)域。給一組設(shè)置為padding-box（背景繪制區(qū)域從內(nèi)邊距框開始），第二組為border-box（背景繪制區(qū)域延伸至邊框）。

此時(shí)的效果如下：

可以看出背景色并不是我們想要的效果，原因是這兩組的繪制起點(diǎn)都是padding-box。

• 如何更改背景繪制區(qū)域的起點(diǎn)？

使用background-origin屬性，該屬性規(guī)定了背景的繪制區(qū)域相對(duì)于什么位置來定位。給一組設(shè)置為padding-box（背景繪制區(qū)域以 padding 區(qū)域?yàn)閰⒖迹诙M為border-box（背景繪制區(qū)域以 border 區(qū)域?yàn)閰⒖迹?/p>

此時(shí)即可得到想要的效果，代碼如下：

HTML

復(fù)制代碼

<div class="border-content"></div>

CSS

復(fù)制代碼

.border-content{  width: 200px;  height: 100px;  border: 2px solid transparent;  border-radius: 5px;  background-clip: padding-box,border-box;  background-origin: padding-box,border-box;  background-image: linear-gradient(0deg,#FFF,#fff),linear-gradient(0deg,#00135A,#01A1FF);}

缺陷

該思路無法實(shí)現(xiàn)透明底的漸變色圓角邊框。

次來看一個(gè)帶特殊圓角導(dǎo)航欄布局，如下谷歌瀏覽器的標(biāo)簽欄：

這樣一個(gè)布局如何實(shí)現(xiàn)呢？

CSS 漸變幾乎是無所不能的，什么的圖形都能繪制，這里可以拆分一下，兩個(gè)矩形，兩個(gè)圓形，還有兩個(gè)反向圓角，也就是 2 個(gè) 線性漸變，4 個(gè)徑向漸變，示意如下：

最終實(shí)時(shí)效果如下（上面是原理圖）

完整代碼如下：

前篇章已經(jīng)介紹過background-color背景色、background-image背景圖片的使用，在css 中還可以使用漸變作為背景，其控制和性能方面比使用實(shí)際圖像文件更好。如果你還不了解background(背景屬性)，可以先看看這篇文章：前端入門——css顏色和背景。

什么是css 漸變

CSS 漸變通常是一種顏色淡入到另一種顏色，CSS 允許您控制漸變的方方面面，從方向、形狀再到顏色以及它們?nèi)绾螐囊环N顏色過渡到另一種顏色。實(shí)際上，漸變分為三種類型：

• 線性漸變（linear-gradient）
• 徑向漸變（radial-gradient）
• 圓錐漸變（conic-gradient）
• 重復(fù)漸變 —— 使用 repeating-linear-gradient 和 repeating-radial-gradient創(chuàng)建線性和徑向重復(fù)漸變。

下面是基本語法：

/* 線性漸變 */
background-image: linear-gradient(#ff8a00, #e52e71);
background-image: linear-gradient(to right, violet, darkred, purple);
background-image: linear-gradient(40deg, rgb(255 0 0) 60%, orange);

/* 徑向漸變 */
background-image: radial-gradient(#ff8a00, #e52e71);
background-image: radial-gradient(circle at top right, #ff8a00, red, #e52e71);

/*圓錐漸變 */
background-image: conic-gradient(#ff8a00, #e52e71);
background-image: conic-gradient(red 50deg, yellow 100deg, lime 200deg, aqua, blue, magenta, red);

效果如下：

下面是重復(fù)漸變：

/*重復(fù)漸變 */
background: repeating-linear-gradient(red, yellow 10%, green 15%);
background: repeating-radial-gradient(red, yellow 10%, green 15%)；

所有的 CSS 漸變類型都是一個(gè)顏色范圍。CSS 漸變產(chǎn)生的顏色可以隨位置不斷變化，從而產(chǎn)生平滑的顏色過渡。也可以創(chuàng)建純色帶和兩種顏色之間的硬過渡。以下內(nèi)容適用于所有漸變函數(shù)：

使用多種顏色

無需局限于使用兩種顏色，你想使用多少種顏色都可以！ 默認(rèn)情況下，所設(shè)置的顏色會(huì)均勻分布在漸變路徑中。

如下示例：

顏色終止位置

你可以通過給每個(gè)顏色設(shè)置 0，1% 或者 2% 或者其他的絕對(duì)數(shù)值來調(diào)整它們的位置。如果你將位置設(shè)置為百分?jǐn)?shù)， 0% 表示起始點(diǎn)，而 100% 表示終點(diǎn)，但是如果需要的話你也可以設(shè)置這個(gè)范圍之外的其他值來達(dá)到你想要的效果。如果有些位置你沒有明確設(shè)置，那么它將會(huì)被自動(dòng)計(jì)算，第一種顏色會(huì)在 0% 處停止，而最后一種顏色是 100%，至于其他顏色則是在它鄰近的兩種顏色的中間停止。

如下示例：

創(chuàng)建實(shí)線

要在兩種顏色之間創(chuàng)建一條硬線，即創(chuàng)建一個(gè)條紋而不是逐漸過渡，可以將相鄰的顏色停止設(shè)置為相同的位置。在此示例中，兩種顏色在 50% 標(biāo)記處共享一個(gè)顏色停止點(diǎn)，即漸變得一半：

改變漸變中心點(diǎn)

默認(rèn)情況下，漸變會(huì)平滑地從一種顏色過渡到另一種顏色。你可以通過設(shè)置一個(gè)值來將漸變的中心點(diǎn)移動(dòng)到指定位置。 在如下示例中，我們將漸變的中心點(diǎn)由 50% 設(shè)為 10%。

最后

以上內(nèi)容，大概介紹了css 漸變所包含的知識(shí)點(diǎn)，下面將會(huì)分多篇文章來介紹每種漸變的使用方法，你可以關(guān)注我，繼續(xù)學(xué)習(xí)其它漸變知識(shí)。

其它相關(guān)文章：

• css 線性漸變
• css 徑向漸變
• css 圓錐漸變
• css 重復(fù)漸變

參考資料：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Images/Using_CSS_gradients

https://css-tricks.com/a-complete-guide-to-css-gradients/