背景色和自身(优惠券)的颜色会改变,实现向内凹的圆效果,效果图如下。如果叫设计师切好几十种背景图是很不现实的,只能用代码来实现,性能会比较好。随着背景色的改变,向内凹圆的背景色也要跟着变,因此,向内凹陷的部分只能设置成透明。
实现如下三种情况:
1、第一种情况(纯色)
自身(优惠券)的颜色是纯色的,这个实现起来比较简单,主要代码如下:
<div class="box"></div>
.box{ width: 160px; height: 100px; background-image: radial-gradient(circle at 9px 8px ,transparent 0%, transparent 8px,#e15852 8px, #e15852 100%); background-position: 121px -8px; background-size: 100% 100px; }
radial-gradient() 函数创建一个<image>,用来展示由原点(渐变中心)辐射开的颜色渐变。其语法是:
background: radial-gradient(shape size at position, start-color, …, last-color);
background-position:圆画在优惠券的左边
background-size: (x,y)两个圆之间的距离
2、第二种情况(渐变,圆在左右两边)
可以把优惠券划分为三个部分:左边圆,中间主体,右边圆,主要代码如下:
<div class="box1"></div>
.box1 { width: 160px; height: 100px; background: radial-gradient(circle at 0 51px, transparent 15px, #fe8864 6px) top left, linear-gradient(0.25turn, #fe8864, #FE5151), radial-gradient(circle at 18px 51px, transparent 15px, #FE5151 16px) bottom right; background-size: 17px 100px, 116px 100px, 17px 100px; background-repeat: no-repeat; background-position: 10px 0px,26px 0px,142px 0px; }
左边圆的颜色取线性渐变的开始,右边圆的颜色取线性渐变颜色的结束值
3、第三种情况(渐变,圆在上下两边)
把优惠券分为四个部分,左边主体线性渐变,上圆,下圆,右边主体线性渐变,主要代码如下:
<div class="box2"></div>
.box2 { width: 160px; height: 100px; background: linear-gradient(0.25turn, #fe8864, #FE5151), radial-gradient(circle at 11px 4px, transparent 6px, #FE5151 6px) top left, radial-gradient(circle at 10px 56px, transparent 6px, #FE5151 6px) bottom left, linear-gradient(0.25turn, #FE5151, #fe434c); background-size: 120px 82px, 20px 50px, 20px 57px, 32px 84px; background-repeat: no-repeat; background-position: 0px 0px,120px -4px, 120px 26px, 140px 0px; }
上圆的下圆的颜色值是取圆所在位置的值,右边主体线性渐变再从圆的颜色值开始到结束的颜色值
原文链接:https://blog.csdn.net/pinena/article/details/89708024?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165277499316781667814000%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165277499316781667814000&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-6-89708024-null-null.nonecase&utm_term=%E4%BC%98%E6%83%A0
暂无评论内容