css实现优惠券效果 全

 效果如下：

样式一：

样式二： 

样式三：  

样式四： 

 

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

-moz-radial-gradient([ || ,]? [ || ,]? , [, ]*);-webkit-radial-gradient([ || ,]? [ || ,]? , [, ]*);

除了你已经在线性渐变中看到的起始位置，方向和颜色，径向梯度允许你指定渐变的形状（圆形或椭圆形）和大小（最近端，最近角，最远端，最远角，包含或覆盖 (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;