整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
使用border-image可以設(shè)置漸變色邊框，但是當(dāng)它與border-radius組合使用時，兩者卻無法兼容。
因此，實現(xiàn)這個效果的另一個思路是：利用兩個圓角矩形的面積差形成邊框。故可以使用以下方法實現(xiàn)：
使用嵌套的兩個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; }使用偽元素充當(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)容之下 */ }給一個div設(shè)置兩個不同大小的背景，從而利用兩個背景制造面積差，也可以實現(xiàn)上述效果。
使用background-image屬性設(shè)置兩組顏色，一組是內(nèi)容顏色，另一組是border邊框顏色，用逗號隔開。
可以使用background-clip 屬性，該屬性規(guī)定了背景的繪制區(qū)域。給一組設(shè)置為padding-box（背景繪制區(qū)域從內(nèi)邊距框開始），第二組為border-box（背景繪制區(qū)域延伸至邊框）。
此時的效果如下：
可以看出背景色并不是我們想要的效果，原因是這兩組的繪制起點都是padding-box。
使用background-origin屬性，該屬性規(guī)定了背景的繪制區(qū)域相對于什么位置來定位。給一組設(shè)置為padding-box（背景繪制區(qū)域以 padding 區(qū)域為參考），第二組為border-box（背景繪制區(qū)域以 border 區(qū)域為參考）。
此時即可得到想要的效果，代碼如下：
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);}該思路無法實現(xiàn)透明底的漸變色圓角邊框。
次來看一個帶特殊圓角導(dǎo)航欄布局，如下谷歌瀏覽器的標(biāo)簽欄：
這樣一個布局如何實現(xiàn)呢？
CSS 漸變幾乎是無所不能的，什么的圖形都能繪制，這里可以拆分一下，兩個矩形，兩個圓形，還有兩個反向圓角，也就是 2 個 線性漸變，4 個徑向漸變，示意如下：
最終實時效果如下（上面是原理圖）
完整代碼如下：
前篇章已經(jīng)介紹過background-color背景色、background-image背景圖片的使用，在css 中還可以使用漸變作為背景，其控制和性能方面比使用實際圖像文件更好。如果你還不了解background(背景屬性)，可以先看看這篇文章：前端入門——css顏色和背景。
CSS 漸變通常是一種顏色淡入到另一種顏色，CSS 允許您控制漸變的方方面面，從方向、形狀再到顏色以及它們?nèi)绾螐囊环N顏色過渡到另一種顏色。實際上，漸變分為三種類型：
下面是基本語法：
/* 線性漸變 */
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%)；線性重復(fù)漸變
徑向重復(fù)漸變
所有的 CSS 漸變類型都是一個顏色范圍。CSS 漸變產(chǎn)生的顏色可以隨位置不斷變化，從而產(chǎn)生平滑的顏色過渡。也可以創(chuàng)建純色帶和兩種顏色之間的硬過渡。以下內(nèi)容適用于所有漸變函數(shù)：
無需局限于使用兩種顏色，你想使用多少種顏色都可以！ 默認(rèn)情況下，所設(shè)置的顏色會均勻分布在漸變路徑中。
如下示例：
你可以通過給每個顏色設(shè)置 0，1% 或者 2% 或者其他的絕對數(shù)值來調(diào)整它們的位置。如果你將位置設(shè)置為百分?jǐn)?shù)， 0% 表示起始點，而 100% 表示終點，但是如果需要的話你也可以設(shè)置這個范圍之外的其他值來達(dá)到你想要的效果。如果有些位置你沒有明確設(shè)置，那么它將會被自動計算，第一種顏色會在 0% 處停止，而最后一種顏色是 100%，至于其他顏色則是在它鄰近的兩種顏色的中間停止。
如下示例：
要在兩種顏色之間創(chuàng)建一條硬線，即創(chuàng)建一個條紋而不是逐漸過渡，可以將相鄰的顏色停止設(shè)置為相同的位置。在此示例中，兩種顏色在 50% 標(biāo)記處共享一個顏色停止點，即漸變得一半：
默認(rèn)情況下，漸變會平滑地從一種顏色過渡到另一種顏色。你可以通過設(shè)置一個值來將漸變的中心點移動到指定位置。 在如下示例中，我們將漸變的中心點由 50% 設(shè)為 10%。
以上內(nèi)容，大概介紹了css 漸變所包含的知識點，下面將會分多篇文章來介紹每種漸變的使用方法，你可以關(guān)注我，繼續(xù)學(xué)習(xí)其它漸變知識。
其它相關(guān)文章：
參考資料：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Images/Using_CSS_gradients
https://css-tricks.com/a-complete-guide-to-css-gradients/
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
