优惠券布局的最终方案------css属性mask

先贴图：

以上这些都是通过mask去实现出来：

	<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div class="content"></div><div class="content1"></div><div class="content2"></div><div class="content3"></div><div class="content4"></div><div class="content5"></div><div class="content6"></div><div class="content7"></div></body><style>* {padding: 0;margin: 0;border: none;line-height: 1;}.content {width: 300px;height: 150px;margin: auto;-webkit-mask: radial-gradient(circle at 0, transparent 20px, red 0), radial-gradient(circle at right, transparent 20px, red 0);-webkit-mask-composite: source-in | destination-in ; /*chrome*/mask-composite: intersect; /*Firefox*/background: linear-gradient(45deg, orange, red);}.content1{width: 300px;height: 150px;background: linear-gradient(45deg, orange, red);margin: auto;-webkit-mask: radial-gradient(circle at 0 0, #0000 20px, red 0), radial-gradient(circle at right 0, #0000 20px, red 0), radial-gradient(circle at 0 100%, #0000 20px, red 0), radial-gradient(circle at right 100%, #0000 20px, red 0); /*4个角落各放一个圆*/-webkit-mask-composite: source-in | destination-in ; /*chrome*/mask-composite: intersect; /*Firefox*/}.content2 {width: 300px;height: 150px;margin: auto;background: linear-gradient(45deg, orange, red);-webkit-mask: radial-gradient(circle at 0, transparent 20px, red 0), radial-gradient(circle at right, transparent 20px, red 0);-webkit-mask-size: 51%; /*避免出现缝隙 */-webkit-mask-position: 0, 100%; /*一个居左一个居右 */-webkit-mask-repeat: no-repeat;}.content3{width: 300px;height: 150px;background: linear-gradient(45deg, orange, red);margin: auto;-webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0); -webkit-mask-position: -20px}.content4{width: 300px;height: 150px;background: linear-gradient(45deg, orange, red);margin: auto;-webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0); -webkit-mask-position: -20px -20px;-webkit-mask-size: 50%;}.content5{width: 300px;height: 150px;background: linear-gradient(45deg, orange, red);margin: auto;-webkit-mask: radial-gradient(circle at 10px, #0000 10px, red 0); -webkit-mask-position: -10px;-webkit-mask-size: 100% 30px;}.content6{width: 300px;height: 150px;background: linear-gradient(45deg, orange, red);margin: auto;-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;}.content7{width: 300px;height: 150px;background: linear-gradient(45deg, orange, red);margin: auto;-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%;-webkit-mask-composite: destination-out;}</style></html>

本文思路来源于前端阅文团队

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

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