CSS3技巧:利用css3径向渐变做一张优惠券

在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过。那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术这么先进再用背景做平铺是不是已经out了,那么今天给大家介绍一个用css3径向渐变做的优惠券。

CSS3 径向渐变和线性渐变是很相似的,首先来看其语法:

mozradialgradient([<bgposition> || <angle>,]? [<shape> || <size>,]? <colorstop>, <colorstop>[, <colorstop>]*);

webkitradialgradient([<bgposition> || <angle>,]? [<shape> || <size>,]? <colorstop>, <colorstop>[, <colo-stop>]*);

做优惠券最主要的代码如下,就是这三句

background: radialgradient(transparent 0, transparent 5px, #F39B00 5px);

backgroundsize: 15px 15px;

backgroundposition: 9px 3px;

CSS代码

HTML代码

<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>

版权属于: 三个前端 | 积累知识,分享经验,交流心得
原文地址: http://web3ge.com/archives/294
欢迎转载,请以链接形式注明原始出处及本声明。

Be the first to comment

发表评论