CSS3_線性漸變(linear-gradient)+ 盒子陰影(box-shadow)


-——css3的文章好久沒有寫過了。今天看到一個比較酷炫的屬性——線性漸變(linear-gradient),決定談談這個屬性。

linear-gradient

——CSS3 grandient分為線性漸變(linear-gradient)和徑向漸變(radial-gradient)。今天主要談談線性漸變。(PS:在IE下的實現需要通過IE特有的濾鏡來實現。)

線性漸變的語法

 先來看看Mozilla、Webkit、Opera下的語法

1 -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* );
2 
3 -webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新發布書寫語法
4 
5 -o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */


參數說明:

1, 第一個參數表示線性漸變的方向,top是從上到下,left是從左到右,如果定義了left top,那就是從左上角到右下角。
2, 第二個和第三個參數分別是起點顏色和終點顏色。你可以在它們之前插入更多的參數,表示多種顏色的漸變。

 

 線性漸變在Trident(IE)下的應用

1 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/
2 
3 -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/

 

IE依靠濾鏡實現漸變。startColorstr表示起點的顏色,endColorstr 表示終點顏色。GradientType 表示漸變類型,0 為缺省值,表示垂直漸變,1 表示水平漸變。

 

角度方向的漸變

——需要特別說明一下的就是角度方向的漸變

當指定漸變方向是角度的時候,它是一個由水平線與漸變線產生的角度,逆時針方向。因此,使用0deg將產生一個左到右橫向梯度,而90度將創建一個從底部到頂部的垂直漸變。

詳情請參考這篇文章:

CSS3 經典教程系列:CSS3 線性漸變(linear-gradient)

下面來看看box-shadow

 

box-shadow

——box-shadow作為CSS3的一個新屬性,效果還是不錯的。下面來看看它的語法

box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

 

 屬性說明:

1,h-shadow : horizontal shadow 水平方向的陰影
2,v-shadow : vertical shadow 垂直方向的陰影
3,blur : 陰影模糊的距離
4,spread : 陰影的大小
5,color : 陰影的顏色
6,inset : 改變陰影的方向

如果你的審美還錯,並且對這個屬性理解不錯,那這個屬性還是可以發揮他較大的作用的。

 

例子

下面來看一個例子:

 

 

 

貼上代碼

 1 *{
 2             margin:0;
 3             padding:0;
 4         }
 5         .box-wrapper{
 6             cursor: pointer;
 7             position: relative;
 8             width: 300px;
 9             height: 200px;
10             margin: 100px auto;
11             border-radius: 5px;
12             background: #fd6a7f;
13             overflow: hidden;
14             -webkit-transition:all .3s ease;
15             transition:all .3s ease;
16         }
17         .gradient{
18             cursor: pointer;
19             position: absolute;
20             top: 0;
21             left: -100%;
22             width: 100%;
23             height: 100%;
24             transform: skew(-25deg);
25             -o-transform:skew(-25deg);
26             -moz-transform:skew(-25deg);
27             -webkit-transform:skew(-25deg);
28             background-image: -webkit-linear-gradient(0deg,hsla(0,0%,100%,0),hsla(0,0%,100%,0.5),hsla(0,0%,100%,0));
29             -webkit-transition:all .3s ease;
30             transition:all .3s ease;
31         }
32         .box-wrapper:hover{
33             transform: translateY(-6px);
34             -webkit-transform: translateY(-6px);
35             -moz-transform:translateY(-6px);
36             box-shadow: 0 26px 40px -24px rgba(0,36,100,.5);
37             -webkit-box-shadow: 0 26px 40px -24px rgba(0,36,100,.5);
38             -moz-box-shadow:0 26px 40px -24px rgba(0,36,100,.5);
39         }
40         .box-wrapper:hover .gradient{
41             left: 100%;
42         }
CSS

 

1 <div class="box-wrapper">
2     <div class="gradient"></div>
3 </div>

 

以上內容,如有錯誤請指出,不甚感激。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM