欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

深入剖析CSS中的線性漸變linear-gradient

  發(fā)布時間：2016-04-12 14:51:44   作者：佚名   我要評論
下面小編就為大家?guī)硪黄钊肫饰鯟SS中的線性漸變linear-gradient。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考

在CSS3出現(xiàn)之前，漸變效果只能通過圖形軟件設(shè)計圖片來實現(xiàn)，可拓展性差，還影響性能。如今已經(jīng)進(jìn)入CSS3標(biāo)準(zhǔn)的漸變可以很輕松的完成漸變效果。漸變實際上分為線性漸變和徑向漸變兩種，本文介紹線性漸變。

定義　　

漸變實際上是兩種或多種顏色之間的平滑過渡。而線性漸變是多種顏色沿著一條直線(稱為漸變線)過渡。漸變的實現(xiàn)由兩部分組成：漸變線和色標(biāo)。漸變線用來控制發(fā)生漸變的方向；色標(biāo)包含一個顏色值和一個位置，用來控制漸變的顏色變化。瀏覽器從每個色標(biāo)的顏色淡出到下一個，以創(chuàng)建平滑的漸變，通過確定多個色標(biāo)可以制作多色漸變效果。

[注意]safari4-5、IOS3.2-4.3、android2.1-3只支持線性漸變，且需要添加-webkit-；safari5.1-6、IOS5.1-6.1、android4-4.3支持線性和徑向漸變，且需要添加-webkit-；IE10+及其他高版本瀏覽器支持標(biāo)準(zhǔn)寫法

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)   
  2. <side-or-corner> = [left | rightright] || [top | bottombottom]  

 

漸變線　　
漸變線從漸變框中心向兩個方向進(jìn)行拓展，起點(diǎn)和終點(diǎn)是漸變線與經(jīng)過漸變框的一個角的垂直線的相交點(diǎn)

漸變的第一個參數(shù)用于指定漸變線，默認(rèn)是to bottom。有兩種方式指定漸變線方向

【1】使用角度

0deg表示沿著元素的中心線由下向上的方向(類似于y軸)，且正角度表示順時針旋轉(zhuǎn)

[注意]對于-webkit-舊版本瀏覽器，如windows系統(tǒng)下的safari瀏覽器來說，0deg表示沿著元素中心線從左向右的方向(類似于x軸),且正角度表示逆時針旋轉(zhuǎn)

所以-webkit-舊版本瀏覽器與標(biāo)準(zhǔn)瀏覽器的之間線性漸變的角度關(guān)系為

-webkit-瀏覽器 = 90deg - 標(biāo)準(zhǔn)瀏覽器
相當(dāng)于
-webkit-linear-gradient(90deg,red,blue) = linear-gradient(0deg,red,blue)

[注意]對于webkit內(nèi)核的瀏覽器來說，使用javascript改變元素的樣式。當(dāng)帶-webkit-的私有樣式和不帶-webkit-的標(biāo)準(zhǔn)樣式同時存在的時候，并不一定是后面覆蓋前面。所以如果兩種寫法產(chǎn)生的效果相同，但參數(shù)不同時，要使用瀏覽器識別來分別寫不同的情況。

【2】使用關(guān)鍵字

CSS Code復(fù)制內(nèi)容到剪貼板
  1. to top -> 0deg   
  2. to rightright -> 90deg   
  3. to bottombottom -> 180deg   
  4. to left -> -90deg(或270deg)   
  5. to top left -> -45deg(或315deg)   
  6. to top rightright -> 45deg   
  7. to bottombottom left -> -135deg(或225deg)   
  8. to bottombottom rightright -> 135deg  

[注意]window系統(tǒng)的safari瀏覽器并不支持'to'加方向的關(guān)鍵字，如to left。它只支持方向關(guān)鍵字，如left。當(dāng)然了left 和 to left 方向是正好相反的

色標(biāo)　　
瀏覽器對于色標(biāo)并沒有默認(rèn)值，且必須設(shè)置至少兩個色標(biāo)。色標(biāo)由顏色和位置組成。顏色使用任何一種顏色模式都可以，而位置可以使用百分比或數(shù)值。

[注意]顏色的位置也可以設(shè)置負(fù)值

【1】必須是顏色在前，位置在后

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. //正確   
  2. background-image: linear-gradient(red 0%,blue 100%);   
  3. //錯誤   
  4. background-image: linear-gradient(0% red,100% blue);  

 

【2】位置可以省略，瀏覽器默認(rèn)會把第一個顏色的位置設(shè)置為0%，把最后一個顏色的位置設(shè)置為100%

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. background-image: linear-gradient(red 0%,blue 100%);   
  2. //等價于上一個   
  3. background-image: linear-gradient(red,blue);  

【3】若漸變只有兩種顏色，且第一個顏色的位置設(shè)置為n%，第二個顏色的位置設(shè)置為m%。則瀏覽器會將0%-n%的范圍設(shè)置為第一個顏色的純色，n%-m%的范圍設(shè)置為第一個顏色到第二個顏色的過渡，m%-100%的范圍設(shè)置為第二個顏色的純色

CSS Code復(fù)制內(nèi)容到剪貼板
  1. background-image: linear-gradient(red 30%,blue 60%);   
  2. //等價于上一個   
  3. background-image: linear-gradient(red 0%,red 30%,blue 60%,blue 100%);  

【4】若漸變顏色沒有指定位置，則它們會均勻分布

CSS Code復(fù)制內(nèi)容到剪貼板
  1. background-image: linear-gradient(red,yellow,green,blue);  

【5】若多色占據(jù)同一個位置，例a、b、c三色均占據(jù)n%這一位置，則0%-n%為前一種顏色與a顏色的顏色漸變；然后是n%-n%的a顏色與c顏色的顏色突變；n%-100%是c顏色與后一種顏色的顏色漸變。因此，中間的b是無用的

CSS Code復(fù)制內(nèi)容到剪貼板
  1. background-image: linear-gradient(red,yellow 50%,white 50%,black 50%,blue);   
  2. //等價于上一個   
  3. background-image: linear-gradient(red,yellow 50%,black 50%,blue);  

重復(fù)漸變　　
重復(fù)漸變可以實現(xiàn)線性漸變的重復(fù)效果，使色標(biāo)在漸變線方向上無限重復(fù)，實現(xiàn)一些特殊的效果
[注意]只有當(dāng)首尾兩顏色位置不在0%或100%時，重復(fù)漸變才生效

CSS Code復(fù)制內(nèi)容到剪貼板
  1. background-image: -webkit-repeating-linear-gradient(blue 20%,green 50%);   
  2. background-image: repeating-linear-gradient(blue 20%,green 50%);  

 

紙張效果

使用重復(fù)漸變可以實現(xiàn)橫線紙張效果　　

CSS Code復(fù)制內(nèi)容到剪貼板
  1. div{   
  2.     height: 200px;   
  3.     width:200px;   
  4.     font: 14px/20px '宋體';   
  5.     text-indent: 2em;   
  6.     background-image: -webkit-repeating-linear-gradient(#f9f9f9,#f9f9f9 9%,#ccc 10%);   
  7.     background-image: repeating-linear-gradient(#f9f9f9,#f9f9f9 9%,#ccc 10%);   
  8. }  

我是特別長的特別長的特

別長的特別長的特別長的特別長的特

別長的特別長的測試文字

 多背景

使用多背景屬性，利用帶有透明度的漸變顏色給圖片添加漸變的透明效果

CSS Code復(fù)制內(nèi)容到剪貼板
  1. background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0.8)),url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif');  

應(yīng)用場景　　

在CSS樣式中，漸變相當(dāng)于背景圖片，在理論上可在任何使用url()值的地方采用。比如最常見的background-image、list-style-image以及border-image。但目前為止，僅在背景圖片中得到完美的支持

【1】background-image

CSS Code復(fù)制內(nèi)容到剪貼板
  1. background-image: -webkit-linear-gradient(pink,lightblue,lightgreen);   
  2. background-image: linear-gradient(pink,lightblue,lightgreen);  

[注意]漸變框的大小由background-size決定，默認(rèn)是padding box

【2】list-style-image

CSS Code復(fù)制內(nèi)容到剪貼板
  1. list-style-image: -webkit-linear-gradient(red,blue);   
  2. list-style-image: linear-gradient(red,blue);   
  3. font-size: 50px;  

[注意]漸變框的大小由font-size決定，默認(rèn)是1em

[注意]firefox不支持在list-style-image中設(shè)置

  • 我是文字

    • 【3】border-image

    CSS Code復(fù)制內(nèi)容到剪貼板
    1. -webkit-border-image:  -webkit-linear-gradient(black,green) 1/10px;       
    2. border-image:  linear-gradient(black,green) 1/10px;  

    [注意]漸變框的大小由borer-width決定，safari瀏覽器始終實現(xiàn)的都是帶有fill參數(shù)的表現(xiàn)

    IE兼容　　

    IE9-瀏覽器并不支持該屬性，但可以使用IE準(zhǔn)專有的濾鏡語法來實現(xiàn)兼容

    CSS Code復(fù)制內(nèi)容到剪貼板
    1. filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#color', endColorstr='#color');GradientType代表漸變線方向，0為垂直(默認(rèn))，1為水平   
    2. #color代表色標(biāo)，格式是#aarrggbb，其中aa為透明度，rrggbb為rgb模式的顏色   
    4. startColorstr的默認(rèn)值是#ff0000ff    
    5. endColorstr的默認(rèn)值是#ff000000  

    [注意]由于IE濾鏡只支持首尾兩個位置，且方向只可以為垂直和水平，所以有很大的局限性

    CSS Code復(fù)制內(nèi)容到剪貼板
    1. filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ff0000ff', endColorstr='#ffff00ff');  

    以上這篇深入剖析CSS中的線性漸變linear-gradient就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

    原文地址：http://www.cnblogs.com/xiaohuochai/archive/2016/04/12/5370446.html

    相關(guān)文章

    最新評論