CSS3 电子优惠卷的设计

上品折扣店

_￥ 50.00 _优惠券

订单满100.00元

副券

2018-06-01
2018-06-18

立即使用

/*通用类样式*********************************/.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; margin:6px 0; }
   .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);    padding: 10px 6px 10px 12px;    font-size: 24px;}
   .stamp .copy p {    font-size: 13px;    margin-top: 12px;    margin-bottom: 16px;}
   .stamp .copy a {    background-color: #fff;    color: #333;    font-size: 14px;    text-decoration: none;    text-align:center;    padding: 5px 10px;    border-radius: 4px;    display: block;}/*设计风格*********************************//*鹅黄*/
   .stamp_yellow  {    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;}
   .stamp_yellow:before { background-color: #F39B00; }
   </style>
   

原文地址