css3实现优惠券效果(向内凹的圆)

背景色和自身(优惠券)的颜色会改变,实现向内凹的圆效果,效果图如下。如果叫设计师切好几十种背景图是很不现实的,只能用代码来实现,性能会比较好。随着背景色的改变,向内凹圆的背景色也要跟着变,因此,向内凹陷的部分只能设置成透明。

实现如下三种情况:

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

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
文明发言,共建和谐米科社区
提交
头像

昵称

取消
昵称表情图片