Css技術(shù)中線性漸變的示例分析

小編給大家分享一下Css技術(shù)中線性漸變的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

對象選擇器 {background:-瀏覽器前綴-linear-gradient( 起點方向,起點顏色,終點顏色);}

徑向漸變的語法

對象選擇器 {background:-瀏覽器前綴-radial-gradient( 起點方向,形狀,大小,起點顏色,終點顏色);}

漸變的兼容方法

1、線性漸變

各瀏覽器前綴

(1)Firefox

(2)Safari , Chrome

(3)Opera 11.10+

兼容IE

2、徑向漸變

徑向漸變和線性漸變的語法差不多

漸變應(yīng)用實例

1、徑向漸變做大背景

background-color:#4B770A;background-image:-webkit-gradient(radial,50%400,1,50%400,400,from(rgba(255,255,255,0.3)),to(rgba(255,255,255,0)));//僅實現(xiàn)了webkit下的效果

2、蒙版效果

position:fixed;width:100%;height:60px;bottom:0px;content:'';background:-moz-linear-gradient(top,rgba(255,255,255,0)0%,rgba(255,255,255,0.33)33%,rgba(255,255,255,0.73)66%,rgba(255,255,255,1)91%);background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,rgba(255,255,255,0)),color-stop(33%,rgba(255,255,255,0.33)),color-stop(66%,rgba(255,255,255,0.73)),color-stop(91%,rgba(255,255,255,1)));background:-webkit-linear-gradient(top,rgba(255,255,255,0)0%,rgba(255,255,255,0.33)33%,rgba(255,255,255,0.73)66%,rgba(255,255,255,1)91%);background:-o-linear-gradient(top,rgba(255,255,255,0)0%,rgba(255,255,255,0.33)33%,rgba(255,255,255,0.73)66%,rgba(255,255,255,1)91%);background:-ms-linear-gradient(top,rgba(255,255,255,0)0%,rgba(255,255,255,0.33)33%,rgba(255,255,255,0.73)66%,rgba(255,255,255,1)91%);background:linear-gradient(top,rgba(255,255,255,0)0%,rgba(255,255,255,0.73)33%,rgba(255,255,255,0.73)66%,rgba(255,255,255,1)91%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff',endColorstr='#ffffff',GradientType=0);

3、漸變按鈕

.myButton{-moz-box-shadow:inset0px1px0px0px#ffffff;-webkit-box-shadow:inset0px1px0px0px#ffffff;box-shadow:inset0px1px0px0px#ffffff;background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0.05,#ededed),color-stop(1,#dfdfdf));background:-moz-linear-gradient(top,#ededed5%,#dfdfdf100%);background:-webkit-linear-gradient(top,#ededed5%,#dfdfdf100%);background:-o-linear-gradient(top,#ededed5%,#dfdfdf100%);background:-ms-linear-gradient(top,#ededed5%,#dfdfdf100%);background:linear-gradient(tobottom,#ededed5%,#dfdfdf100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',endColorstr='#dfdfdf',GradientType=0);background-color:#ededed;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1pxsolid#dcdcdc;display:inline-block;cursor:pointer;color:#777777;font-family:arial;font-size:15px;font-weight:bold;padding:6px24px;text-decoration:none;text-shadow:0px1px0px#ffffff;margin-top:100px;}.myButton:hover{background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0.05,#dfdfdf),color-stop(1,#ededed));background:-moz-linear-gradient(top,#dfdfdf5%,#ededed100%);background:-webkit-linear-gradient(top,#dfdfdf5%,#ededed100%);background:-o-linear-gradient(top,#dfdfdf5%,#ededed100%);background:-ms-linear-gradient(top,#dfdfdf5%,#ededed100%);background:linear-gradient(tobottom,#dfdfdf5%,#ededed100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf',endColorstr='#ededed',GradientType=0);background-color:#dfdfdf;}.myButton:active{position:relative;top:1px;}

以上是“Css技術(shù)中線性漸變的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！