CSS实现各种优惠券效果

一、左半圆效果

在这里插入图片描述

<style style="text/css">.coupon {width: 240px;height: 100px;margin-top: 15px;background-color: #ff6347;-webkit-mask: radial-gradient(circle at left center, transparent 20px, red 20px); }
</style><div class="coupon"></div>

二、左右半圆效果

在这里插入图片描述

<style type="text/css">
.coupon2 {width: 240px;height: 100px;margin-top: 15px;background-color: #F56C6C;-webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0), radial-gradient(circle at right, #0000 20px, red 0);-webkit-mask-size: 51%;-webkit-mask-position: 0, 100%;-webkit-mask-repeat: no-repeat;
}
</style>
<div class="coupon2"></div>

三、左内圆效果

在这里插入图片描述

<style type="text/css">
.coupon3 {width: 240px;height: 100px;margin-top: 15px;background-color: #F56C6C;-webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0); 
}
</style>
<div class="coupon3"></div>

四、四角收缩效果

在这里插入图片描述

<style type="text/css">
.coupon4 {width: 240px;height: 100px;margin-top: 15px;background-color: #F56C6C;-webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0); -webkit-mask-position: -20px -20px;
}
</style>
<div class="coupon4"></div>

缩写
.coupon4 {-webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px; 
}

五、六角收缩效果

在这里插入图片描述

<style type="text/css">
.coupon5 {width: 240px;height: 100px;margin-top: 15px;background-color: #F56C6C;-webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0); -webkit-mask-position: -20px -20px;-webkit-mask-size: 50%;
}
</style>
<div class="coupon5"></div>

缩写
.coupon5 {-webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%; 
}

六、凹边效果

在这里插入图片描述

<style type="text/css">
.coupon6 {width: 240px;height: 100px;margin-top: 15px;background-color: #F56C6C;-webkit-mask: radial-gradient(circle at 10px, #0000 10px, red 0); -webkit-mask-position: -10px;-webkit-mask-size: 100% 30px;
}
</style>
<div class="coupon6"></div>

七、中排圆点效果

在这里插入图片描述

<style type="text/css">
.coupon7 {width: 300px;height: 130px;margin-top: 15px;background-color: #F56C6C;-webkit-mask: radial-gradient( circle at 50%, red 5px, transparent 0) 50% 50% / 100% 20px, radial-gradient(circle at 20px 20px, transparent 20px, red 0) -20px -20px / 50%;-webkit-mask-composite: destination-out;
}
</style>
<div class="coupon7"></div>

八、两边凹陷效果

在这里插入图片描述

<style type="text/css">
.coupon8 {width: 240px;height: 100px;margin-top: 15px;background-color: #F56C6C;-webkit-mask: radial-gradient( circle at 5px, red 5px, transparent 0) -5px 50% / 100% 20px, radial-gradient(circle at 20px 20px, transparent 20px, red 0) -20px -20px / 50%;-webkit-mask-composite: destination-out;
}
</style>
<div class="coupon8"></div>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/830334.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！