首頁 >web前端 >css教學 >如何使用CSS3中gradient屬性做出背景漸變效果

如何使用CSS3中gradient屬性做出背景漸變效果

清浅
清浅原創
2018-11-20 11:42:362309瀏覽

這篇文章將分享有關CSS3背景漸變的效果,有一定的參考價值,希望對大家有所幫助

背景漸變是一個很好的的特效,那麼如何去利用CSS3去做這個效果呢,今天將為大家分享CSS3漸變,CSS3漸變是向圖像模組中添加的新類型的圖像。 CSS3漸層允許在兩個或多個指定顏色之間顯示平滑過渡。

瀏覽器支援兩種類型的漸層:

linear, 用linear-gradient()函數定義,

radial, 用radial-gradient ()函數定義.

使用過程中註意瀏覽器的相容問題

Safari , Chrome :-webkit-linear-gradient

Firefox :-moz- linear-gradient

IE :-ms-linear-gradient

Opera:-o-linear-gradient

#本篇文章將以Chrome 瀏覽器為例進行講解

線性漸變

要建立線性漸變,將起點和方向設為角度,也要定義顏色停止必須指定至少兩個停止顏色。

從頂部到底部的線性漸變

#
div{
  /* 倒退 */
width:200px;
height:200px;
background-color: #1a82f7;
background-repeat: repeat-x;
background: -webkit-linear-gradient(top, #2F2727, #1a82f7); 
}

Image 1.jpg

##從左到右的漸變過程

 div{
  /* 倒退 */
width:200px;
height:200px;
background-color: #1a82f7;
background-repeat: repeat-x;
background: -webkit-linear-gradient(left, #2F2727, #1a82f7);
}

Image 2.jpg

#線性漸變(偶數停頓)

div{
 background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);}

Image 3.jpg

徑向漸層

##徑向漸層由它的中心定義,必須至少定義兩種顏色結點,還可以指定漸變的中心、形狀(圓形或橢圓形)、大小,預設情況下,漸變的中心是center(表示在中心點),漸變的形狀是ellipse(表示橢圓形),漸變的大小是farthest-corner(表示到最遠的角落)。

居中徑向漸層

div{
width:500px;
height:100px;
background-color: #2F2727;
background-position: center center;
background-repeat: no-repeat;
 background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);
}

Image 5.jpg

#自訂徑向漸層

closest-side: 最近端, closest-corner:最近角

div{
width:500px;
height:100px;
background-color: #2F2727;
background-position: 80% 20%;//自己自定义位置
background-repeat: no-repeat;
 background: -webkit-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);
}

Image 6.jpg


################################################ ##總結:以上就是本篇文章的所有內容了,希望透過本篇文章對大家學習漸變有所幫助。 ############### ###

以上是如何使用CSS3中gradient屬性做出背景漸變效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

相關文章

看更多