建站
咨詢
售后
建站咨詢
新聞中心
頁(yè)面中如果有兩種或多種指定顏色之間的平滑過渡的漸變效果，會(huì)使得我們的視覺效果瞬間提升幾個(gè)檔次，在CSS3中有提供的多個(gè)漸變方式屬性就能讓我們輕松實(shí)現(xiàn)這樣的漸變效果。
蟠龍ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！
目前CSS漸變屬性有六個(gè)，分別為:linear-gradient(線性漸變),repeating-linear-gradient(重復(fù)線性漸變),radial-gradient(徑向漸變),repeating-radial-gradient(重復(fù)徑向漸變),conic-gradient(錐形漸變),repeating-conic-gradient(重復(fù)錐形漸變); CSS漸變屬性作用是從一種顏色平滑漸變到另一種顏色的圖像，那么background-image和border-image屬性都可以用漸變作為圖片內(nèi)容。 下面，我們就分別來(lái)看看這幾個(gè)屬性的效果
linear-gradient和repeating-linear-gradient
線性漸變以直線的方式，可向左、向右、向上、向下、對(duì)角方向延伸，使用頻率很高。要?jiǎng)?chuàng)建線性漸變,需要指定兩種及以上的顏值和方向，如果未指定方向，默認(rèn)為上到下漸變。
使用語(yǔ)法:
background-image: linear-gradient(direction, ColorStop1, ColorStop2, ...,ColorStopN);
- direction的取值有: to right（向右）、to bottom（向下）、to bottom right(向右下角)、180deg(向下)
- ColorStop為指定漸變顏色和漸變位置，顏色代碼可以是十六進(jìn)制顏色代碼，RGB顏色代碼。位置可以是百分比也可以是像素
.bg{
width: 200px;
height: 200px;
background-image: linear-gradient( rgb(123, 255, 0),rgb(119, 0, 255));
}
默認(rèn)從上到下。
.bg{
width: 200px;
height: 200px;
background-image: linear-gradient(to bottom right, rgb(123, 255, 0),rgb(119, 0, 255));
}指定方向從左上角到右下角。
.bg{
width: 200px;
height: 200px;
background-image: linear-gradient(to bottom right, rgb(123, 255, 0),rgb(119, 0, 255),rgb(255, 0, 43));
}指定方向從左上角到右下角,設(shè)置多種漸變顏色。
.bg{
width: 200px;
height: 200px;
background-image: linear-gradient(to bottom right, rgb(123, 255, 0) 0,rgb(251, 255, 0) 15%,rgb(119, 0, 255) 35% 80%,rgb(255, 0, 43));
}指定方向從左上角到右下角,設(shè)置多種漸變顏色及顏色作用位置。
repeating-linear-gradient用得可能比較少，它是基于linear-gradient進(jìn)行重復(fù)平鋪操作。
.bg{
width: 200px;
height: 200px;
background-image: repeating-linear-gradient(to bottom, rgb(123, 255, 0) 0 ,rgb(251, 255, 0)10%,rgb(255, 0, 43)15%);
}前面都是漸變背景，我們?cè)賮?lái)看看漸變邊框是什么效果。
.bg{
width: 200px;
height: 200px;
border-width:10px;
border-style:solid;
border-image:linear-gradient(to bottom right, rgb(123, 255, 0) 0,rgb(251, 255, 0) 15%,rgb(119, 0, 255) 35% 80%,rgb(255, 0, 43)) 1 10;
}
radial-gradient
徑向漸變以由中心點(diǎn)由圓或者橢圓向外擴(kuò)散，使用語(yǔ)法。
background-image: radial-gradient(shape size at position, ColorStop, ..., ColorStopN);
- shape 圓類型，就兩種：ellipse(橢圓)和circle (圓)，默認(rèn)ellipse
- size 漸變大小，分別有farthest-corner(從圓心到圓最遠(yuǎn)的角為半徑),farthest-side(從圓心到圓最遠(yuǎn)的邊為半徑),closest-corner(從圓心到圓最近的角為半徑),closest-side(從圓心到圓最近的邊為半徑),Size，默認(rèn)是farthest-corner，
- position 位置：left,right,top,bottom,center或者數(shù)值比分比,默認(rèn)是center
- ColorStop,漸變顏色和漸變位置radial-gradient的用法和linear-gradient的用法相似
.bg{
width: 200px;
height: 200px;
background-image: radial-gradient( rgb(123, 255, 0) 0,rgb(251, 255, 0) 15%,rgb(119, 0, 255) 35% 80%,rgb(255, 0, 43));
}
.bg{
width: 200px;
height: 200px;
border-width:10px;
border-style:solid;
border-image:radial-gradient(rgb(123, 255, 0) 0,rgb(251, 255, 0) 15%,rgb(119, 0, 255) 35% 80%,rgb(255, 0, 43)) 1 10;
}
conic-gradient
一般情況下，用conic-gradient的場(chǎng)景比較少,但我們也可以基本了解一下。其基本語(yǔ)法：
background-image: conic-gradient(from angle at position,ColorStop, ...,ColorStopN);
- from angle 起點(diǎn)角度，默認(rèn)0deg
- position 位置：left,right,top,bottom,center或者數(shù)值比分比,默認(rèn)是center
- ColorStop,漸變顏色和漸變位置
.bg{
width: 200px;
height: 200px;
background-image: conic-gradient( rgb(123, 255, 0) 0,rgb(251, 255, 0) 15%,rgb(119, 0, 255) 35% 80%,rgb(255, 0, 43));
}
.bg{
width: 200px;
height: 200px;
background-image: conic-gradient(from 90deg at left, rgb(123, 255, 0) 0,rgb(251, 255, 0) 15%,rgb(119, 0, 255) 35% 80%,rgb(255, 0, 43));
}
.bg{
width: 200px;
height: 200px;
border-width:10px;
border-style:solid;
border-image:conic-gradient(from 90deg at left, rgb(123, 255, 0) 0,rgb(251, 255, 0) 15%,rgb(119, 0, 255) 35% 80%,rgb(255, 0, 43)) 1 10;
} 分享文章：CSS漸變屬性的特效，你學(xué)會(huì)了嗎？
轉(zhuǎn)載來(lái)源：http://www.dlmjj.cn/article/djdpedi.html
