css3中漸變屬性式是什么

這篇文章主要介紹了css3中漸變屬性式是什么，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

css的基本語(yǔ)法是什么

css的基本語(yǔ)法是：1、css規(guī)則由選擇器和一條或多條聲明兩個(gè)部分構(gòu)成；2、選擇器通常是需要改變樣式的HTML元素；3、每條聲明由一個(gè)屬性和一個(gè)值組成；4、屬性和屬性值被冒號(hào)分隔開(kāi)。

漸變屬性有：1、線性漸變“l(fā)inear-gradient()”，語(yǔ)法為“l(fā)inear-gradient(角度,顏色,顏色)”；2、徑向漸變“radial-gradient()”，語(yǔ)法為“radial-gradient(位置,顏色,顏色)”。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

漸變可以使得元素背景更加有靈性并具有生氣，雖然我們可以使用背景圖片來(lái)呈現(xiàn)漸變效果，但卻是不夠靈活，當(dāng)想要改變顏色時(shí)需要使用圖片編輯器重新編輯，而漸變則可以在代碼中直接改變顏色就可以了。CSS3提供了兩種漸變方式，分別是線性漸變（linear-gradient）和徑向漸變（radial-0gradien）。

一、線性漸變（linear-gradient）

線性漸變就是沿著某個(gè)方向進(jìn)行顏色上的漸變，可以使用左右上下以及對(duì)角線。

線性漸變語(yǔ)法：

background: linear-gradient(direction, color1, color2 [stop], color3...);

1、direaction：表示線性漸變的方向。有以下三種表示方法。

（1）漸變方向

• to left：設(shè)置漸變?yōu)閺挠业阶蟆?/p>

• to bottom：設(shè)置漸變從上到下。這是默認(rèn)值。

• to right：設(shè)置漸變從左到右。

• to top：設(shè)置漸變從下到上。

也可以是to left top、to left bottom、to right top、to right bottom四個(gè)對(duì)角線方向。

（2）方向起點(diǎn)

• top：設(shè)置漸變從上到下。這是默認(rèn)值。

• bottom：設(shè)置漸變從下到上。

• left：設(shè)置漸變從左到右。

• right：設(shè)置漸變?yōu)閺挠业阶蟆?/p>

也可以是left top、left bottom、right top、right bottom四個(gè)對(duì)角線方向。

（3）角度（angle）

角度用數(shù)字+單位來(lái)進(jìn)行表示，單位使用deg。所有的顏色都是從中心出發(fā)，0deg是to top的方向，順時(shí)針是正，逆時(shí)針是負(fù)。

• 0deg相當(dāng)于to top

• 90deg相當(dāng)于to right

• 180deg相當(dāng)于to bottom，這是默認(rèn)值

• 270deg或者 - 90deg相當(dāng)于to left

也相應(yīng)地有45deg、135deg、225deg、315deg來(lái)表示對(duì)角線方向，但是使用角度表示方向相較于給定水平垂直方向更加靈活可以根據(jù)需要來(lái)調(diào)整角度，已達(dá)到想要的效果。

2、color- * ：表示漸變中的過(guò)度顏色，一般第一個(gè)表示漸變起始顏色，最后一個(gè)表示漸變的結(jié)束顏色，中間表示中間過(guò)度顏色。

3、stop：color后面可以加上stop，stop可以使百分值也可以是像素值，表示某個(gè)顏色在stop位置處固定，如下：

background: linear-gradient(to right, blue, green 20%, yellow 50%, purple 80%, red);
//漸變起始顏色是藍(lán)色，當(dāng)過(guò)度到20%時(shí)為綠色，也就是說(shuō)在20%處恰好是綠色，然后繼續(xù)漸變過(guò)度到黃色，到50%處恰好是黃色，后面同個(gè)道理，直到結(jié)束顏色紅色，正好處于100%處。

二、重復(fù)線性漸變（repeating-linear-gradient）

說(shuō)到線性漸變，我們不得不提一下重復(fù)線性漸變，有時(shí)我們想生成如下圖的條紋效果，我們最方便的方法就是重復(fù)線性漸變。

語(yǔ)法代碼：

background: repeating-linear-gradient(#f00 0,#f00 10%,#ff0 10%,#ff0 20%);

以上紅色從0開(kāi)始漸變，到達(dá)10%時(shí)還是紅色，所以形成紅色條紋，在10%后變?yōu)辄S色，直到20%還是黃色，所以此時(shí)形成黃色條紋，然后渲染時(shí)會(huì)將這20%的紅黃條紋進(jìn)行重復(fù)的漸變，使得呈現(xiàn)出紅黃條紋相間的效果。

我們也可以添加入方向

background: repeating-linear-gradient(45deg,#f00 0,#f00 10%,#ff0 10%,#ff0 20%);

三、徑向漸變（radial-gradient）

徑向漸變指從一個(gè)中心點(diǎn)開(kāi)始沿著四周產(chǎn)生漸變效果。由其中心點(diǎn)、邊緣形狀輪廓及位置、色值結(jié)束點(diǎn)（color stops）定義而成。

當(dāng)我們?yōu)橐粋€(gè)漸變?cè)O(shè)置多個(gè)顏色時(shí)，它們會(huì)平分這個(gè)100%的區(qū)域來(lái)漸變。當(dāng)然除了百分比，我們也可以使用具體的像素來(lái)設(shè)置這個(gè)大小。像素設(shè)置的大小指的是從漸變圓心向外延伸的距離。

徑向漸變語(yǔ)法：

<radial-gradient> = radial-gradient([ [<shape> || <size>] [ at <position> ]? ,
| at <position>, ]?<color>[stop]?[ ,<color>[stop]?]+)

其中各種屬性的意思如下：

// 圓心位置
<position> = [ <length> | <percentage> | left | center | right ]? [ <length> | 
<percentage> | top | center | bottom ]?  //默認(rèn)處于中心點(diǎn)
// 漸變形狀
<shape> = circle | ellipse  //默認(rèn)是ellipse
// 漸變大小
<size> = <extent-keyword> | [ <circle-size> || <ellipse-size>]
<extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner
<circle-size> = <length>
<ellipse-size> = [ <length> | <percentage> ]{2}
<shape-size> = <length> | <percentage>
// 漸變顏色及顏色位置
<color>[stop]? = <color> [ <length> | <percentage> ]?

上面需要詳細(xì)講明一下

我們?cè)跐u變定義時(shí)可以直接定義漸變的形狀，但除了這種方式，還可以通過(guò)為size傳入具體值在確定漸變形狀，具體說(shuō)明如下：

1、當(dāng)傳入一個(gè)大小參數(shù)size或者兩個(gè)相同值得size時(shí)，則表示該漸變形狀是圓。

background: radial-gradient(60px,#f00 0,#ff0 100%);

2、當(dāng)傳入兩個(gè)大小不同的size參數(shù)時(shí)，則表示該漸變形狀為橢圓。

background: radial-gradient(100px 60px,#f00 0,#ff0 100%);

四、重復(fù)徑向漸變（repeating-radial-gradient）

上面再說(shuō)線性漸變時(shí)有說(shuō)到線性漸變具有重復(fù)線性漸變，為徑向漸變同樣具有重復(fù)徑向漸變，先看一個(gè)簡(jiǎn)單例子。

background: repeating-radial-gradient(circle at center,#f00 0,#f00 10%,
#ff0 10%,#ff0 20%);

重復(fù)徑向漸變總體上與重復(fù)線性漸變差不多，只是重復(fù)線性漸變是一個(gè)方向上的重復(fù)漸變，不論是水平垂直還是對(duì)角線，如下圖，左邊為0%，右邊為100%。

然而重復(fù)徑向則是以圓心為中心點(diǎn)，以放射性方式漸變，中心點(diǎn)為0%，圓邊界為100%。

關(guān)于上面重復(fù)徑向漸變是如何生成條紋相間的就 不多加述說(shuō)，原理和重復(fù)線性漸變相同。

下面給出一個(gè)重復(fù)徑向漸變的實(shí)用例子，使用重復(fù)徑向漸變生成一個(gè)唱片的效果 。

HTML：

<p class='record-container'>
     <p class='record'></p>
</p>

CSS：

.record-container {
     display: inline-block;
     overflow: hidden;
     width: 400px;
     height: 300px;
     border-radius: 10px;
     box-shadow: 0 6px #99907e;
     background: #b5ac9a;
}
        
.record {
     position: relative;
     margin: 19px auto;
     width: 262px;
     height: 262px;
     border-radius: 50%;
     background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) 
no-repeat 100% 0, linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) 
no-repeat 0 100%, repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px,
 #2a2928 6px);
     background-size: 50% 100%, 100% 50%, 100% 100%;
}    
.record:after {
     position: absolute;
     top: 50%;
     left: 50%;
     margin: -35px;
     border: solid 1px #d9a388;
     width: 68px;
     height: 68px;
     border-radius: 50%;
     box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
     background: #b5ac9a;
     content: '';
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css3中漸變屬性式是什么”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!