css3优惠券的代码

CSS3技术为网页设计提供了更加丰富的表现方式，其中之一就是优惠券的制作。

/* CSS3 优惠券样式 */
.discount {
position: relative;
width: 300px;
height: 150px;
background: #FFF;
border: 1px dashed #EAEAEA;
padding: 20px;
}
.discount:before,
.discount:after {
content: '';
position: absolute;
top: -10px;
border: 20px solid transparent;
border-bottom: 20px solid #FFF;
}
.discount:before {
left: -20px;
}
.discount:after {
right: -20px;
}
.discount-content {
text-align: center;
font-family: Arial, sans-serif;
font-size: 20px;
}
.discount-code {
background: #F9C68B;
color: #FFF;
padding: 10px 20px;
margin-top: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
display: inline-block;
}

以上是CSS3优惠券的样式代码，下面是使用这段代码制作的一个优惠券。

 
Get 10% off
on your next purchase
Enter this code at checkout:
SUMMER10

      
查看更多关于css3优惠券的代码的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did245759