CSS3實(shí)現(xiàn)線性漸變用法示例代碼詳解
我要評論前言
演示下太老版本瀏覽器的漸變實(shí)現(xiàn)了[IE9-];
IE9以前,漸變都是通過濾鏡實(shí)現(xiàn)的,大體的寫法就是這樣;
.testDiv {
width:400px;
height:400px;
border:1px solid #f00;
/*
IE濾鏡寫法;
gradientType : 1代表水平方向 , 0 代表垂直線性漸變 ;
startColorstr是起始顏色,endColorstr是結(jié)束顏色;
顏色支持十六進(jìn)制的寫法或者英文單詞
當(dāng)然也支持透明度[十六進(jìn)制]
#AAFF0000[AA是透明度(00是完全透明,FF是完全不透明)],后六位是標(biāo)準(zhǔn)的十六進(jìn)制顏色寫法;
*/
/*IE6~7*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ccff7700", endColorstr="#eeccc222", GradientType=1);
/*IE8*/
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ccff7700", endColorstr="#eeccc222", GradientType=1);
}
效果圖就是這樣: 水平漸變且顏色比較淡,設(shè)置了透明
本文主要扯下CSS3下原生實(shí)現(xiàn)漸變效果的!!![主流的瀏覽器和移動(dòng)端瀏覽器都可以任性使用]
CSS3線性漸變兼容性
標(biāo)準(zhǔn)語法(包含兩個(gè)參數(shù),第一個(gè)參數(shù)可以是角度或者英文方向,第二個(gè)是漸變起始,可以多個(gè)顏色值!)
gradient : ([方向或者角度] , 起始值顏色)
firefox/chrome/ms/opera 四者的寫法已經(jīng)標(biāo)準(zhǔn)化,較前一些版本需要帶前綴
firefox(-moz-)/chrome(-webkit-)/microsoft(-ms)/opera(-o-) [四種前綴對應(yīng)四種解析引擎,我那樣寫只是曾經(jīng)的代表瀏覽器,…比如現(xiàn)在opera都跑去用google的blink引擎]
###漸變角度(deg是degree的縮寫,角度的意思)
自下而上: to top = 0deg || 360deg
自上而下: top bottom = 180deg || -180deg
自左到右: top left = -90deg || 270deg
自右到左: to right = 90deg || -270deg
右下角到左上角: to top left = 315deg || -45deg
左下角到右上角: to top right = -315deg || 45deg
右上角到左下角: to bottom left = 225deg || -135deg
左上角到右下角:to bootom right = 135deg || -225deg
溫馨提示: 建議用角度比較標(biāo)準(zhǔn)化,英文方向的safari有些解析后和其他瀏覽器好像不一樣
效果圖
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css" media="screen">
div {
width: 200px;
height: 200px;
border: 1px solid #ccc;
box-sizing: border-box;
text-align: center;
line-height: 200px;
float: left;
margin: 10px;
}
/*
我這里的類命名都是簡寫:
u :up,
d:down,
l:left,
r:right,
b:bottom,
2: to;
角度正數(shù)是順時(shí)針,負(fù)的逆時(shí)針;角度是代表到某個(gè)角度的時(shí)候開始往其他范圍擴(kuò)散哦;
以前剛搞的時(shí)候也挺懵,其實(shí)自己多寫寫就曉得了;
截止我寫這篇文章,漸變的標(biāo)準(zhǔn)規(guī)范更加完善了,許多都不需要帶前綴了;
而為了兼顧移動(dòng)端,webkit這種還不能丟掉
*/
.u2d {
background: -webkit-linear-gradient(180deg, #590BCC, #18CC6C);
background: linear-gradient(180deg, #590BCC, #18CC6C);
}
.d2u {
background: -webkit-linear-gradient(0deg, #590BCC, #18CC6C);
background: linear-gradient(0deg, #590BCC, #18CC6C);
}
.l2r {
background: -webkit-linear-gradient(90deg, #590BCC, #18CC6C);
background: linear-gradient(90deg, #590BCC, #18CC6C);
}
.r2l {
background: -webkit-linear-gradient(-90deg, #590BCC, #18CC6C);
background: linear-gradient(-90deg, #590BCC, #18CC6C);
}
.rb2lu {
background: -webkit-linear-gradient(-45deg, #590BCC, #18CC6C);
background: linear-gradient(-45deg, #590BCC, #18CC6C);
}
.lb2ru {
background: -webkit-linear-gradient(45deg, #590BCC, #18CC6C);
background: linear-gradient(45deg, #590BCC, #18CC6C);
}
.ru2lb {
background: -webkit-linear-gradient(-135deg, #590BCC, #18CC6C);
background: linear-gradient(-135deg, #590BCC, #18CC6C);
}
.lu2rd {
background: -webkit-linear-gradient(135deg, #590BCC, #18CC6C);
background: linear-gradient(135deg, #590BCC, #18CC6C);
}
.mclg1 {
background: -webkit-linear-gradient(135deg, #D6C4F0, #F6B5B5,#18CC6C,#1AB25E);
background: linear-gradient(135deg, #D6C4F0, #F6B5B5,#18CC6C,#1AB25E);
}
.mclg2 {
background: -webkit-linear-gradient(135deg, #1FB4DC ,#18CC6C , #8B1A1A,#677C67,#BED128);
background: linear-gradient(135deg, #1FB4DC ,#18CC6C , #8B1A1A,#677C67,#BED128);
}
.mclg3 {
background: webkit-linear-gradient(135deg, #590BCC, #18CC6C,#B5D821,#22CB33,#BA8787,#050201);
background: linear-gradient(135deg, #590BCC, #18CC6C,#B5D821,#22CB33,#BA8787,#050201);
}
.mclg4 {
background: -webkit-linear-gradient(-135deg, rgba(20,20,20,.9) ,rgba(50,50,50,.6),rgba(60,125,70,.7), rgba(150,150,150,.8),rgba(200,200,200,.9),rgba(80,125,6,.75),rgba(175,75,75,.5));
background: linear-gradient(-135deg, rgba(20,20,20,.9) ,rgba(50,50,50,.6),rgba(60,125,70,.7), rgba(150,150,150,.8),rgba(200,200,200,.9),rgba(80,125,6,.75),rgba(175,75,75,.5));
}
</style>
</head>
<body>
<div class="u2d">自上而下</div>
<div class="d2u">自下而上</div>
<div class="l2r">自左到右</div>
<div class="r2l">自右到左</div>
<div class="rb2lu">右下角到左上角</div>
<div class="lb2ru">左下角到右上角</div>
<div class="ru2lb">右上角到左下角</div>
<div class="lu2rd">左上角到右下角</div>
<div class="mclg1">四種顏色漸變</div>
<div class="mclg2">五種顏色漸變</div>
<div class="mclg3">六種顏色漸變</div>
<div class="mclg4">其中顏色帶透明的漸變</div>
</body>
</html>
總結(jié)
CSS3的出現(xiàn),讓線性漸變不用只依賴PS實(shí)現(xiàn)了…前端的小伙伴也能自行做出各種挺炫的漸變效果!!!哈哈哈哈哈~~~
到此這篇關(guān)于CSS3實(shí)現(xiàn)線性漸變用法示例代碼詳解的文章就介紹到這了,更多相關(guān)css3 線性漸變內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS 實(shí)現(xiàn)漸變效果小結(jié)( linear-gradient線性漸變 和 radial-gradient徑
這篇文章主要介紹了CSS 實(shí)現(xiàn)漸變效果的代碼( linear-gradient線性漸變 和 radial-gradient徑向漸變),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的2020-04-16
CSS3 linear-gradient線性漸變生成加號和減號的方法
本篇文章主要介紹了CSS3 linear-gradient線性漸變生成加號和減號的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-21
CSS3,線性漸變（linear-gradient）的使用總結(jié)
今天這篇文章我們在一起來看看 CSS3 中實(shí)現(xiàn)漸變效果的 Gradient 屬性的具體用法。在以前，漸變效果和陰影、圓角效果一樣都是做成圖片，直接編寫 CSS 代碼就可以實(shí)現(xiàn)。2017-01-09- 這篇文章主要為大家詳細(xì)介紹了CSS3 漸變（Gradients）之CSS3 線性漸變的相關(guān)資料，了解學(xué)習(xí)CSS3 線性漸變，感興趣的小伙伴們可以參考一下2016-07-08
利用CSS3的線性漸變linear-gradient制作邊框的示例
linear-gradient線條用來制作邊框還是比較給力的,尤其是利用其描邊可以制作一些復(fù)制的邊框效果,這里我們就來看一下利用CSS3的線性漸變linear-gradient制作邊框的示例2016-06-02- 下面小編就為大家?guī)硪黄钊肫饰鯟SS中的線性漸變linear-gradient。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-04-12
- 這篇文章主要介紹了CSS3中顏色線性漸變實(shí)戰(zhàn),示例中展示了代碼設(shè)置不同漸變方向的效果,需要的朋友可以參考下2015-07-18
- 這篇文章主要介紹了CSS3中線性顏色漸變的一些實(shí)現(xiàn)方法,包括分Safari和Chrome的webkit內(nèi)核與Firefox的Gecko內(nèi)核兩種情況,需要的朋友可以參考下2015-07-14
