您現在的位置: 365建站網 > 365學習 > css3背景顏色漸變(Gradients)屬性設置方法

css3背景顏色漸變(Gradients)屬性設置方法

文章來源:365jz.com     點擊數:432    更新時間:2017-12-22 13:42   參與評論

CSS3漸變(Gradients)可以讓你在兩個或多個指定顏色之間顯示平穩的過度,包括透明度。

以前,你必須使用圖像來實現這些效果。但是,通過CSS3漸變(Gradients),你可以減少下載的事件和寬帶的使用。此外,漸變效果元素在放大時看起來效果更好,因為漸變(gradient)是由瀏覽器生成的。

CSS3定義了兩種類型的漸變(gradients):

1.線性漸變(Linear Gradients)-向下、向上、向左、向右、對角方向:(to bottom、to top、to right、to left、to bottom right,等等)

2.徑向漸變(Radial Gradients)-由他們的中心定義

瀏覽器支持:

表中的數字指定了完全支持該屬性的第一個瀏覽器版本。

后邊跟 -webkit-、-moz- 或 -o- 的數字指定了需加上前綴才能支持屬性的第一個版本。

屬性  IE  Google   FF  Safari Opera 
linear-gradient 10.0 26.0
10.0 -webkit-
16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.1 -o-
radial-gradient 10.0 26.0
10.0 -webkit-
16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.6 -o-
repeating-linear-gradient 10.0 26.0
10.0 -webkit-
16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.1 -o-
repeating-radial-gradient 10.0 26.0
10.0 -webkit-
16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.6 -o-

CSS3 線性漸變(linear-gradient/repeating-linear-gradient)

創建一個線性漸變,至少定義兩種顏色結點,用于呈現平穩過度的顏色。同時,你也可以設置一個起點和一個方向(或一個角度)。

指定方向語法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

1.線性漸變-默認情況下,從上到下

.divOne {
    width: 100px;
    height: 100px;
    background: linear-gradient(red, blue);
}
    <!--線性漸變-默認情況下,從上到下
    1.支持IE10及以上瀏覽器
    -->
    <div class="divOne"></div>

2.線性漸變-從左到右

.divOne {
    width: 100px;
    height: 100px;
    background: linear-gradient(to right, red, blue);
}

3.線性漸變-對角

.divOne {
    width: 100px;
    height: 100px;
    background: linear-gradient(to bottom right, red, blue);
}

指定角度語法:

如果你想要在漸變方向上做更多的控制,你可以定義一個角度,而不用使用預定義的方向。

background: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平線和漸變線之間的角度,逆時針方向計算。換句話說,0deg 將創建一個從下到上的漸變,90deg 將創建一個從左到右的漸變。

4.線性漸變-指定角度:

 
.divOne {
    background: linear-gradient(30deg, red, blue);
}

.divTwo {
        background: linear-gradient(0deg, red, blue);
}
.divThree{
        background: linear-gradient(90deg, red, blue);
}
 

5.線性漸變-使用多個顏色點:

 
        .divOne {
            background: linear-gradient( red, green, blue);
        }
        .divTwo {
            background: linear-gradient( red 10%, green 85%, blue 90%);
        }
        .divThree {
            background: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
        }
 

6.線性漸變-使用透明度(Transparent),透明度的漸變

CSS3 漸變也支持透明度(transparency),可用于創建減弱變淡的效果。

為了添加透明度,我們使用 rgba() 函數來定義顏色結點。rgba() 函數中的最后一個參數可以是從 0 到 1 的值,它定義了顏色的透明度:0 表示完全透明,1 表示完全不透明。

 
.divOne {
    background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}

.divTwo {
    background: linear-gradient(to bottom, rgba(255, 255, 0, 0.3), rgba(0, 255, 255, 1));
}
 

7.重復的線性漸變-repeating-linear-gradient()

 
.divOne {
    background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

.divTwo {
    background: repeating-linear-gradient(to right, rgba(255, 255, 0, 0.3) 10%, rgba(0, 255, 255, 1) 20%);
}
 



 

在很多購物網站上都能看到優惠券,代金券,什么什么的券,但基本都是圖片直接放上去,那么你有沒有想過css來做一個呢,反正我是這樣想過。那么你怎么做呢,切圖做背景平鋪邊緣,嗯,有這樣想過,如今css3技術這么先進再用背景做平鋪是不是已經out了,那么今天給大家介紹一個用css3徑向漸變做的優惠券。

CSS3 徑向漸變和線性漸變是很相似的,首先來看其語法:

-moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
-webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*

除了你已經在線性漸變中看到的起始位置,方向和顏色,徑向梯度允許你指定漸變的形狀(圓形或橢圓形)和大?。ㄗ罱?,最近角,最遠端,最遠角,包含或覆蓋 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover))。 顏色起止(Color stops):就像用線性漸變,你應該沿著漸變線定義漸變的起止顏色。

做優惠券最主要的代碼如下,就是這三句

background: radial-gradient(transparent 0, transparent 5px, #F39B00 5px);
background-size: 15px 15px;
background-position: 9px 3px;

不多解釋直接上代碼
優惠券

 

CSS代碼

//這是公共樣式
.stamp {width: 387px;height: 140px;padding: 0 10px;position: relative;overflow: hidden;}
.stamp:before {content: '';position: absolute;top:0;bottom:0;left:10px;right:10px;z-index: -1;}
.stamp:after {content: '';position: absolute;left: 10px;top: 10px;right: 10px;bottom: 10px;box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);z-index: -2;}
.stamp i{position: absolute;left: 20%;top: 45px;height: 190px;width: 390px;background-color: rgba(255,255,255,.15);transform: rotate(-30deg);}
.stamp .par{float: left;padding: 16px 15px;width: 220px;border-right:2px dashed rgba(255,255,255,.3);text-align: left;}
.stamp .par p{color:#fff;}
.stamp .par span{font-size: 50px;color:#fff;margin-right: 5px;}
.stamp .par .sign{font-size: 34px;}
.stamp .par sub{position: relative;top:-5px;color:rgba(255,255,255,.8);}
.stamp .copy{display: inline-block;padding:21px 14px;width:100px;vertical-align: text-bottom;font-size: 30px;color:rgb(255,255,255);}
.stamp .copy p{font-size: 16px;margin-top: 15px;}
.stamp01{background: #F39B00;background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 5px, #F39B00 5px);background-size: 15px 15px;background-position: 9px 3px;}
.stamp01:before{background-color:#F39B00;}
.stamp02{background: #D24161;background: radial-gradient(transparent 0, transparent 5px, #D24161 5px);background-size: 15px 15px;background-position: 9px 3px;}
.stamp02:before{background-color:#D24161;}
.stamp03{background: #7EAB1E;background: radial-gradient(transparent 0, transparent 5px, #7EAB1E 5px);background-size: 15px 15px;background-position: 9px 3px;}
.stamp03:before{background-color:#7EAB1E;}
.stamp03 .copy{padding: 10px 6px 10px 12px;font-size: 24px;}
.stamp03 .copy p{font-size: 14px;margin-top: 5px;margin-bottom: 8px;}
.stamp03 .copy a{background-color:#fff;color:#333;font-size: 14px;text-decoration:none;padding:5px 10px;border-radius:3px;display: block;}
.stamp04{width: 390px;background: #50ADD3;background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 4px, #50ADD3 4px);background-size: 12px 8px;background-position: -5px 10px;}
.stamp04:before{background-color:#50ADD3;left: 5px;right: 5px;}
.stamp04 .copy{padding: 10px 6px 10px 12px;font-size: 24px;}
.stamp04 .copy p{font-size: 14px;margin-top: 5px;margin-bottom: 8px;}
.stamp04 .copy a{background-color:#fff;color:#333;font-size: 14px;text-decoration:none;padding:5px 10px;border-radius:3px;display: block;}


HTML代碼

<div class="stamp stamp01">
<div class="par"><p>XXXXXX折扣店</p><sub class="sign">¥</sub><span>50.00</span><sub>優惠券</sub><p>訂單滿100.00元</p></div>
<div class="copy">副券<p>2015-08-13<br>2016-08-13</p></div>
<i></i>
</div>
<div class="stamp stamp02">
<div class="par"><p>XXXXXX折扣店</p><sub class="sign">¥</sub><span>50.00</span><sub>優惠券</sub><p>訂單滿100.00元</p></div>
<div class="copy">副券<p>2015-08-13<br>2016-08-13</p></div>
<i></i>
</div>
<div class="stamp stamp03">
<div class="par"><p>XXXXXX折扣店</p><sub class="sign">¥</sub><span>50.00</span><sub>優惠券</sub><p>訂單滿100.00元</p></div>
<div class="copy">副券<p>2015-08-13<br>2016-08-13</p><a href="#">立即使用</a></div>
<i></i>
</div>
<div class="stamp stamp04">
<div class="par"><p>XXXXXX折扣店</p><sub class="sign">¥</sub><span>50.00</span><sub>優惠券</sub><p>訂單滿100.00元</p></div>
<div class="copy">副券<p>2015-08-13<br>2016-08-13</p><a href="#">立即使用</a></div>
<i></i>
</div>




如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (432人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 三邦车视| tube8XXX videos| 美女学生精品国自产拍| 日本三级香港三级人妇99| 国产自无码视频在线观看| 一胎双宝总裁大人夜夜欢| 97资源共享在线视频| 欧美牲交av欧差aa片欧美精品| 亚洲欧洲国产成人综合| 青青在线播放观看| 欧美videos人牛交| 久久九九av免费精品| 日日噜噜夜夜狠狠视频免费| 亚洲精品高清国产一线久久| 美女的小泬泬流爱液视频| 亚洲自偷自拍另类第1页| 俄罗斯14一18处交| 皮特影院手机在线观看免费| 99久久婷婷国产综合精品青草| aa久久久久免费是国产| 成人免费a级毛片| japanese50mature亂倫中国| 东北老熟妇大声叫痒| 10第一次TEE| 日本漫画无翼乌全彩工番漫画| 国精品产露脸偷拍视频86| 337p日本欧洲亚洲大胆艺术图| 无码中文av有码中文av| 亚洲精品人成网线在线播放va| 2020无码专区人妻系列日韩| 久久亚洲 欧美 国产 综合aⅴ| http://www.firmakimlik.com