生活随笔
收集整理的這篇文章主要介紹了
线性渐变（linear-gradient）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
線性漸變（linear-gradient）
現(xiàn)行漸變
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0'); background: -moz-linear-gradient(top, #FF0000, #F9F900); background: -o-linear-gradient(top,#FF0000, #F9F900); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900));
View Code 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>線性漸變（linear-gradient）---http://www.cnblogs.com/kuikui</title>
5 <style type="text/css">
6 .test1
7 {
8 width :
200px ;
9 height :
80px ;
10 text-align :
center ;
11 line-height :
80px ;
12 margin-bottom :
10px ;
13 color :
White ;
14 font-size :
20px ;
15 filter :
progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0') ;
16 background :
-moz-linear-gradient(top, #FF0000, #F9F900) ;
17 background :
-o-linear-gradient(top,#FF0000, #F9F900) ;
18 background :
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900)) ;
19 }
20 .test2
21 {
22 width :
200px ;
23 height :
80px ;
24 text-align :
center ;
25 line-height :
80px ;
26 margin-bottom :
10px ;
27 color :
White ;
28 font-size :
20px ;
29 filter :
progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='1') ;
30 background :
-moz-linear-gradient(left, #FF0000, #F9F900) ;
31 background :
-o-linear-gradient(left,#FF0000, #F9F900) ;
32 background :
-webkit-gradient(linear, 0% 0%, 100% 0%, from(#FF0000), to(#F9F900)) ;
33 }
34 </style>
35 </head>
36 <body>
37 <div class="test1">
38 垂直漸變
39 </div>
40 <div class="test2">
41 水平漸變
42 </div>
43 </body>
44 </html> 總結(jié)
以上是生活随笔 為你收集整理的线性渐变（linear-gradient） 的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔 推薦給好友。
