上午制作網頁時,寫了一個利用 CSS3 實現網頁背景顏色漸變的效果,晚上整理代理時,發現這效果還挺好玩的。記錄下來,以后再寫這種網頁背景顏色漸變的效果時,只能復制就行了。

網頁背景顏色的漸變,利用了 CSS3 中的 Gradients 屬性,而漸變的效果又分為了兩種,分別為:Linear Gradients(線性漸變) 和 Radial Gradients(徑向漸變)!

CSS3 linear-gradient定義和用法

国产视频appLinear Gradients 定義:用線性漸變創建一個背景圖像

語法:

background-image: linear-gradient(point,color1,color2,.....);

參數:

国产视频apppoint:(可選)為漸變的坐標值,如省略則默認從上到下漸變,

国产视频appcolor:為顏色值,可以寫入多個,如:red,#fff

CSS3 背景顏色線性漸變示例

1、CSS3 背景顏色四個方向的線性漸變

CSS代碼:

/**默認向下漸變*/
background-image: linear-gradient( red , yellow);
/**向上漸變*/
background-image: linear-gradient(to top ,red , yellow);
/**向右漸變*/
background-image: linear-gradient(to right ,red , yellow);
/**向左漸變*/
background-image: linear-gradient(to left ,red , yellow);

運行結果:

国产视频app起始顏色為紅包,結束顏色為黃色

CSS3實現背景顏色漸變的方法

2、CSS3 背景顏色線性對角漸變

CSS代碼:

/**向右下角漸變*/
background-image: linear-gradient(to bottom right ,red , yellow);
/**向右上角漸變*/
background-image: linear-gradient(to top right ,red , yellow);
/**向左上角漸變*/
background-image: linear-gradient(to top left ,red , yellow);
/**向左下角漸變*/
background-image: linear-gradient(to bottom left ,red , yellow);

運行結果:

国产视频app起始顏色為紅包,結束顏色為黃色

CSS3實現背景顏色漸變的方法

3、CSS3 背景顏色,自定義角度漸變

国产视频app如果你想要在漸變的方向上做更多的控制,你可以定義一個角度,而不用使用上面給出的方向漸變或是對角漸變

国产视频app角度是指水平線和漸變線之間的角度,逆時針方向計算,當然你可以參考下圖和下面的示例:

CSS3實現背景顏色漸變的方法

示例CSS代碼:

/**0 角度漸變*/
background-image: linear-gradient( 0deg,red , yellow);
/**15 度角漸變*/
background-image: linear-gradient( 45deg,red , yellow);
/**180 度角漸變*/
background-image: linear-gradient( 180deg,red , yellow);
/**-90 度角漸變*/
background-image: linear-gradient( -90deg,red , yellow);

運行結果:

CSS3實現背景顏色漸變的方法

4、CSS3 背景顏色重復漸變

CSS3 背景顏色重復漸變,需要使用 repeating-linear-gradient 值

CSS代碼:

background-image: repeating-linear-gradient(red, yellow 10%, green 20%); 
background-image: repeating-linear-gradient(45deg ,red 20%, yellow 30%);

運行結果:

CSS3實現背景顏色漸變的方法

CSS3 Radial Gradients( 定義與用法

国产视频appRadial Gradients:創建一個徑向漸變的背景圖片

語法:

background-image: radial-gradient(shape size  position, color1,color2,color3...);

參數:

shape:定義形狀,circle(圓形),ellipse(橢圓),

size:定義了漸變的大小

它的可選值如下:

closest-side:指定徑向漸變的半徑長度為從圓心到離圓心最近的邊

国产视频appclosest-corner:指定徑向漸變的半徑長度為從圓心到離圓心最近的角

国产视频appfarthest-side:指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊

farthest-corner:指定徑向漸變的半徑長度為從圓心到離圓心最遠的角

国产视频appcontain:包含,指定徑向漸變的半徑長度為從圓心到離圓心最近的點。類同于closest-side

国产视频appcover:覆蓋,指定徑向漸變的半徑長度為從圓心到離圓心最遠的點。類同于farthest-corner

注:

国产视频app使用背景顏色徑向漸變時,你也必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。同時,你也可以指定漸變的中心、形狀(圓形或橢圓形)、大小。默認情況下,漸變的中心是 center(表示在中心點),漸變的形狀是 ellipse(表示橢圓形),漸變的大小是 farthest-corner(表示到最遠的角落)。

CSS3 背景顏色徑向漸變示例

1、CSS3背景顏色徑向漸變

CSS代碼

/* 顏色均勻漸變的大小 */
background-image: radial-gradient(red, yellow, green);
/* 指定顏色區域大小 */
background-image: radial-gradient(red 10%, yellow 25%, green 60%);
/* 改變形狀 */
background-image: radial-gradient(circle, red, yellow, green);
/* 指定漸變的大小 */
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);

運行結果

CSS3實現背景顏色漸變的方法

2、CSS3 背景顏色重復徑向漸變

CSS3 中的顏色重復徑向漸變,需要用到 repeating-radial-gradient 屬性

CSS代碼:

/* 重復的徑向漸變 */
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
/* 改變形狀后的重復的徑向漸變 */
background-image: repeating-radial-gradient(circle,red, yellow 20%, green 30%);

運行結果:

CSS3實現背景顏色漸變的方法

PS:文章是邊查閱資源,邊寫的,有不對的地方,還請在下方留言指正!