css实现各种优惠券效果丨技术开发分享录

css实现各种优惠券效果

{{ detail.nickname }}

转载 翻译 {{ formatTime(detail.create_time) }} 字数 {{ detail.content && detail.content.length }} 阅读 {{ detail.read_num }} {{ formatTag(v) }}

"主要使用 `mask` 样式处理,因为 `mask` 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。\n文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask\n\n## 一、左半圆效果\n\n<style type=\"text/css\">\n.coupon {\n  width: 240px;\n  height: 100px;\n  margin-top: 15px;\n  background-color: #F56C6C;\n  -webkit-mask: radial-gradient(circle at left center, transparent 20px, red 20px); \n}\n</style>\n<div class=\"coupon\"></div>\n\n```html\n<style type=\"text/css\">\n.coupon {\n  width: 240px;\n  height: 100px;\n  margin-top: 15px;\n  background-color: #F56C6C;\n  -webkit-mask: radial-gradient(circle at left center, transparent 20px, red 20px); \n}\n</style>\n<div class=\"coupon\"></div>\n```\n\n## 二、左右半圆效果\n\n<style type=\"text/css\">\n.coupon2 {\n  width: 240px;\n  height: 100px;\n  margin-top: 15px;\n  background-color: #F56C6C;\n  -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0), radial-gradient(circle at right, #0000 20px, red 0);\n  -webkit-mask-size: 51%;\n  -webkit-mask-position: 0, 100%;\n  -webkit-mask-repeat: no-repeat;\n}\n</style>\n<div class=\"coupon2\"></div>\n\n```html\n<style type=\"text/css\">\n.coupon2 {\n  width: 240px;\n  height: 100px;\n  margin-top: 15px;\n  background-color: #F56C6C;\n  -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0), radial-gradient(circle at right, #0000 20px, red 0);\n  -webkit-mask-size: 51%;\n  -webkit-mask-position: 0, 100%;\n  -webkit-mask-repeat: no-repeat;\n}\n</style>\n<div class=\"coupon2\"></div>\n```\n\n## 三、左内圆\n\n<style type=\"text/css\">\n.coupon3 {\n  width: 240px;\n  height: 100px;\n  margin-top: 15px;\n  background-color: #F56C6C;\n  -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0); \n}\n</style>\n<div class=\"coupon3\"></div>\n\n```html\n<style type=\"text/css\">\n.coupon3 {\n  width: 240px;\n  height: 100px;\n  margin-top: 15px;\n  background-color: #F56C6C;\n  -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0); \n}\n</style>\n<div class=\"coupon3\"></div>\n```\n\n## 四、四角收缩\n\n<style type=\"text/css\">\n.coupon4 {\n  width: 240px;\n  height: 100px;\n  margin-top: 15px;\n  background-color: #F56C6C;\n  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0); \n  -webkit-mask-position: -20px -20px;\n}\n</style>\n<div class=\"coupon4\"></div>\n\n```html\n<style type=\"text/css\">\n.coupon4 {\n  width: 240px;\n  height: 100px;\n  margin-top: 15px;\n  background-color: #F56C6C;\n  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0); \n  -webkit-mask-position: -20px -20px;\n}\n</style>\n<div class=\"coupon4\"></div>\n```\n\n缩写\n\n```css\n.coupon4 {\n  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px; \n}\n```\n\n## 五、六角收缩\n\n<style type=\"text/css\">\n.coupon5 {\n  width: 240px;\n  height: 100px;\n  margin-top: 15px;\n  background-color: #F56C6C;\n  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0); \n  -webkit-mask-position: -20px -20px;\n  -webkit-mask-size: 50%;\n}\n</style>\n<div class=\"coupon5\"></div>\n\n```html\n<style type=\"text/css\">\n.coupon5 {\n  width: 240px;\n  height: 100px;\n  margin-top: 15px;\n  background-color: #F56C6C;\n  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0); \n  -webkit-mask-position: -20px -20px;\n  -webkit-mask-size: 50%;\n}\n</style>\n<div class=\"coupon5\"></div>\n```\n\n缩写\n\n```css\n.coupon5 {\n  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%; \n}\n```\n\n## 六、凹边\n\n<style type=\"text/css\">\n.coupon6 {\n  width: 240px;\n  height: 100px;\n  margin-top: 15px;\n  background-color: #F56C6C;\n  -webkit-mask: radial-gradient(circle at 10px, #0000 10px, red 0); \n  -webkit-mask-position: -10px;\n  -webkit-mask-size: 100% 30px;\n}\n</style>\n<div class=\"coupon6\"></div>\n\n```html\n<style type=\"text/css\">\n.coupon6 {\n  width: 240px;\n  height: 100px;\n  margin-top: 15px;\n  background-color: #F56C6C;\n  -webkit-mask: radial-gradient(circle at 10px, #0000 10px, red 0); \n  -webkit-mask-position: -10px;\n  -webkit-mask-size: 100% 30px;\n}\n</style>\n<div class=\"coupon6\"></div>\n```\n\n## 七、中排圆点\n\n<style type=\"text/css\">\n.coupon7 {\n  width: 240px;\n  height: 100px;\n  margin-top: 15px;\n  background-color: #F56C6C;\n  -webkit-mask: radial-gradient(circle at 50%, red 5px, #0000 0) 50% 50% / 100% 20px, radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;\n  -webkit-mask-composite: destination-out;\n  mask-composite: subtract; /*Firefox*/\n}\n</style>\n<div class=\"coupon7\"></div>\n\n```html\n<style type=\"text/css\">\n.coupon7 {\n  width: 240px;\n  height: 100px;\n  margin-top: 15px;\n  background-color: #F56C6C;\n  -webkit-mask: radial-gradient(circle at 50%, red 5px, #0000 0) 50% 50% / 100% 20px, radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;\n  -webkit-mask-composite: destination-out;\n  mask-composite: subtract; /*Firefox*/\n}\n</style>\n<div class=\"coupon7\"></div>\n```\n\n## 八、两边凹陷\n\n<style type=\"text/css\">\n.coupon8 {\n  width: 240px;\n  height: 100px;\n  margin-top: 15px;\n  background-color: #F56C6C;\n  -webkit-mask: radial-gradient( circle at 5px, red 5px, #0000 0) -5px 50% / 100% 20px, radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;\n  -webkit-mask-composite: destination-out;\n  mask-composite: subtract; /*Firefox*/\n}\n</style>\n<div class=\"coupon8\"></div>\n\n```html\n<style type=\"text/css\">\n.coupon8 {\n  width: 240px;\n  height: 100px;\n  margin-top: 15px;\n  background-color: #F56C6C;\n  -webkit-mask: radial-gradient( circle at 5px, red 5px, #0000 0) -5px 50% / 100% 20px, radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;\n  -webkit-mask-composite: destination-out;\n  mask-composite: subtract; /*Firefox*/\n}\n</style>\n<div class=\"coupon8\"></div>\n```"
PS:写作不易,如要转裁,请标明转载出处。

如果此篇对您有帮助,可小额赞助,以兹鼓励!

猜你想看