利用css3径向渐变做一张优惠券的示例

admin

1. <style>
   
2. .stamp {width: 387px;height: 140px;padding: 0 10px;position: relative;overflow: hidden;}
   
3. .stamp:before {content: '';position: absolute;top:0;bottom:0;left:10px;right:10px;z-index: -1;}
   
4. .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;}
   
5. .stamp i{position: absolute;left: 20%;top: 45px;height: 190px;width: 390px;background-color: rgba(255,255,255,.15);transform: rotate(-30deg);}
   
6. .stamp .par{float: left;padding: 16px 15px;width: 220px;border-right:2px dashed rgba(255,255,255,.3);text-align: left;}
   
7. .stamp .par p{color:#fff;}
   
8. .stamp .par span{font-size: 50px;color:#fff;margin-right: 5px;}
   
9. .stamp .par .sign{font-size: 34px;}
   
10. .stamp .par sub{position: relative;top:-5px;color:rgba(255,255,255,.8);}
    
11. .stamp .copy{display: inline-block;padding:21px 14px;width:100px;vertical-align: text-bottom;font-size: 30px;color:rgb(255,255,255);}
    
12. .stamp .copy p{font-size: 16px;margin-top: 15px;}
    
13. .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;}
    
14. .stamp01:before{background-color:#F39B00;}
    
15. .stamp02{background: #D24161;background: radial-gradient(transparent 0, transparent 5px, #D24161 5px);background-size: 15px 15px;background-position: 9px 3px;}
    
16. .stamp02:before{background-color:#D24161;}
    
17. .stamp03{background: #7EAB1E;background: radial-gradient(transparent 0, transparent 5px, #7EAB1E 5px);background-size: 15px 15px;background-position: 9px 3px;}
    
18. .stamp03:before{background-color:#7EAB1E;}
    
19. .stamp03 .copy{padding: 10px 6px 10px 12px;font-size: 24px;}
    
20. .stamp03 .copy p{font-size: 14px;margin-top: 5px;margin-bottom: 8px;}
    
21. .stamp03 .copy a{background-color:#fff;color:#333;font-size: 14px;text-decoration:none;padding:5px 10px;border-radius:3px;display: block;}
    
22. .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;}
    
23. .stamp04:before{background-color:#50ADD3;left: 5px;right: 5px;}
    
24. .stamp04 .copy{padding: 10px 6px 10px 12px;font-size: 24px;}
    
25. .stamp04 .copy p{font-size: 14px;margin-top: 5px;margin-bottom: 8px;}
    
26. .stamp04 .copy a{background-color:#fff;color:#333;font-size: 14px;text-decoration:none;padding:5px 10px;border-radius:3px;display: block;}
    
27. 
    
28. </style>

复制代码

1. 
   
2. <div class="stamp stamp01">
   
3. <div class="par"><p>XXXXXX折扣店</p><sub class="sign">￥</sub><span>50.00</span>_优惠券<p>订单满100.00元</p></div>
   
4. <div class="copy">副券<p>2015-08-13<br>2016-08-13</p></div>
   
5. <i></i>
   
6. </div>
   
7. <div class="stamp stamp02">
   
8. <div class="par"><p>XXXXXX折扣店</p><sub class="sign">￥</sub><span>50.00</span>_优惠券<p>订单满100.00元</p></div>
   
9. <div class="copy">副券<p>2015-08-13<br>2016-08-13</p></div>
   
10. <i></i>
    
11. </div>
    
12. <div class="stamp stamp03">
    
13. <div class="par"><p>XXXXXX折扣店</p><sub class="sign">￥</sub><span>50.00</span>_优惠券<p>订单满100.00元</p></div>
    
14. <div class="copy">副券<p>2015-08-13<br>2016-08-13</p><a href="#">立即使用</a></div>
    
15. <i></i>
    
16. </div>
    
17. <div class="stamp stamp04">
    
18. <div class="par"><p>XXXXXX折扣店</p><sub class="sign">￥</sub><span>50.00</span>_优惠券<p>订单满100.00元</p></div>
    
19. <div class="copy">副券<p>2015-08-13<br>2016-08-13</p><a href="#">立即使用</a></div>
    
20. <i></i>
    
21. </div>

复制代码