Css技术中使用径向渐变做一张优惠券

主要的代码如下：

background:radial-gradient(transparent0,transparent5px,#F39B005px); background-size:15px15px; background-position:9px3px;

完整代码：

CSS代码

stamp{ width:387px; height:140px; padding:010px; 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:0020px1pxrgba(0,0,0,0.5); z-index:-2; } .stampi{ 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:16px15px; width:220px; border-right:2pxdashedrgba(255,255,255,.3); text-align:left; } .stamp.parp{ color:#fff; } .stamp.parspan{ font-size:50px; color:#fff; margin-right:5px; } .stamp.par.sign{ font-size:34px; } .stamp.parsub{ position:relative; top:-5px; color:rgba(255,255,255,.8); } .stamp.copy{ display:inline-block; padding:21px14px; width:100px; vertical-align:text-bottom; font-size:30px; color:rgb(255,255,255); } .stamp.copyp{ font-size:16px; margin-top:15px; }

.stamp01{ background:#F39B00; background:radial-gradient(rgba(0,0,0,0)0,rgba(0,0,0,0)5px,#F39B005px); background-size:15px15px; background-position:9px3px; } .stamp01:before{ background-color:#F39B00; }

.stamp02{ background:#D24161; background:radial-gradient(transparent0,transparent5px,#D241615px); background-size:15px15px; background-position:9px3px; } .stamp02:before{ background-color:#D24161; }

.stamp03{ background:#7EAB1E; background:radial-gradient(transparent0,transparent5px,#7EAB1E5px); background-size:15px15px; background-position:9px3px; } .stamp03:before{ background-color:#7EAB1E; } .stamp03.copy{ padding:10px6px10px12px; font-size:24px; } .stamp03.copyp{ font-size:14px; margin-top:5px; margin-bottom:8px; } .stamp03.copya{ background-color:#fff; color:#333; font-size:14px; text-decoration:none; padding:5px10px; border-radius:3px; display:block; }

.stamp04{ width:390px; background:#50ADD3; background:radial-gradient(rgba(0,0,0,0)0,rgba(0,0,0,0)4px,#50ADD34px); background-size:12px8px; background-position:-5px10px; } .stamp04:before{ background-color:#50ADD3; left:5px; right:5px; } .stamp04.copy{ padding:10px6px10px12px; font-size:24px; } .stamp04.copyp{ font-size:14px; margin-top:5px; margin-bottom:8px; } .stamp04.copya{ background-color:#fff; color:#333; font-size:14px; text-decoration:none; padding:5px10px; border-radius:3px; display:block; }

HTML代码

XXXXXX

XXXXXX

XXXXXX

XXXXXX

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！