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

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>]*);

　　

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

做優(yōu)惠券最主要的代碼如下，就是這三句

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>_{優(yōu)惠券}<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>_{優(yōu)惠券}<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>_{優(yōu)惠券}<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>_{優(yōu)惠券}<p>訂單滿100.00元</p></div> <div class="copy">副券<p>2015-08-13<br>2016-08-13</p><a href="#">立即使用</a></div> <i></i> </div>

　　

轉(zhuǎn)載于:https://www.cnblogs.com/xupeiyu/p/5258717.html

總結(jié)

以上是生活随笔為你收集整理的CSS3技巧：利用css3径向渐变做一张优惠券（转）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。