css优惠券、卡券样式绘制(带阴影、锯齿)

这篇博客分享了如何使用CSS3的径向渐变和线性渐变来制作带有锯齿边缘和虚线分隔的优惠券样式。通过详细步骤和代码示例,展示了如何利用伪类和滤镜实现优惠券的阴影效果,以及调整内部渐变色。文章适合前端开发者学习和参考。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近在做一个商城类的小程序项目,卡券是商城必不可缺的了,一开始打算UI切图,但发现不是那么方便,于是参考各种资料自己捣鼓了一个,废话不多说,先上效果图:
在这里插入图片描述
从效果图可以看到这个优惠券是左右两边都带锯齿的,中间还有一条虚线,这三个效果都可以分别用伪类做出来,为了封装后插槽使用方便,这里把优惠券以虚线为准分了两部分,下面是布局,比较简单

<view class="tickets">
  <view class="l-tickets"></view>
  <view class="r-tickets"></view>
</view>
.tickets {
	display: flex;
	padding: 20rpx;
	width: 100%;
	height: 230rpx;
	box-sizing: border-box;
}
.l-tickets {
  width: 75%;
  background: skyblue;
}
.r-tickets {
	flex: 1;
	background: orchid;
}

出来的效果是这样的:
在这里插入图片描述

接着我们来做左右两边的锯齿,优惠券锯齿用到的CSS主要是 radial-gradient() 函数(详细参数可以参考菜鸟教程),可以利用伪类进行绘制:

.l-tickets {
  width: 75%;
  height: 100%;
  position: relative;
}
.l-tickets::after {
  content: '';
  position: absolute;
  height: 100%;
  width: 8rpx;
  top: 0;
  left: -8rpx;
  /* 
  	语法:
  	background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit; 
  	radial-gradient(shape size at position, start-color, ..., last-color);
  */
  background: radial-gradient(circle at left center, transparent 8rpx, skyblue 0) left center / 8rpx 20rpx;
}
.r-tickets {
  flex: 1;
  position: relative;
}
.r-tickets::after {
  content: '';
  position: absolute;
  height: 100%;
  width: 8rpx;
  top: 0;
  right: -8rpx;
  background: radial-gradient(circle at right center, transparent 8rpx, orchid 0) right center / 8rpx 20rpx;
}

效果是这样的:
在这里插入图片描述
然后是上下两个半圆,同样是利用 radial-gradient() 实现,在盒子里绘制上下两个径向渐变,移动到相应位置就ok了:

.l-tickets {
  width: 75%;
  height: 100%;
  position: relative;
  background: radial-gradient(circle at right top, transparent 16rpx,skyblue 0) right top / 100% 50% no-repeat,
              radial-gradient(circle at right bottom, transparent 16rpx, skyblue 0) right bottom / 100% 50% no-repeat;
}
.r-tickets {
  position: relative;
  background: radial-gradient(circle at left top, transparent 16rpx,  orchid 0) right top / 100% 50% no-repeat,
              radial-gradient(circle at left bottom, transparent 16rpx,  orchid 0) right bottom / 100% 50% no-repeat;
}

效果图:
在这里插入图片描述

做到这一步其实就已经快完成啦,接下来看一看中间的虚线,如果是想方便快捷的话直接用border也是可以的,但是用border做的虚线无法调整虚线间的间距,就不太美观,所以为了追求完美,我们使用 linear-gradient() 函数也就是线性渐变来画虚线:

.r-tickets::before {
  content: '';
  width: 1rpx;
  background: linear-gradient(to top, #fff 0%, #fff 50%, transparent 50%) top left / 1rpx 20rpx repeat-y;
  position: absolute;
  left: 0;
  top: 16rpx;
  bottom: 16rpx;
} 

效果如下:
f0UXi6.png

最后我们给卡券加个阴影,这里用到的是 filter: drop-shadow,有关于 filter: drop-shadowbox-shadow 的区别,可以参考这里,直接上代码:

.l-tickets {
  width: 75%;
  height: 100%;
  position: relative;
  background: radial-gradient(circle at right top, transparent 16rpx,skyblue 0) right top / 100% 50% no-repeat,
              radial-gradient(circle at right bottom, transparent 16rpx, skyblue 0) right bottom / 100% 50% no-repeat;
  filter: drop-shadow(-3px 0 3px rgba(0,0,0,.3));
}
.r-tickets {
  position: relative;
  background: radial-gradient(circle at left top, transparent 16rpx,  orchid 0) right top / 100% 50% no-repeat,
              radial-gradient(circle at left bottom, transparent 16rpx,  orchid 0) right bottom / 100% 50% no-repeat;
  filter: drop-shadow(3px 0 3px rgba(0,0,0,.3));
}

效果:
f0a7p8.png

到这里卡券就大功告成啦!只要往里面塞内容就好了~~最后是一个小扩展,卡券内部的渐变色调整,感兴趣的朋友们可以研究下:

.l-tickets {
  width: 75%;
  position: relative;
  background: radial-gradient(circle at right top, transparent 16rpx,#ffc854 0, #FFB300 100%) right top / 100% 50% no-repeat,
              radial-gradient(circle at right bottom, transparent 16rpx, #ffc854 0, #FFB300 100%) right bottom / 100% 50% no-repeat;
  filter: drop-shadow(-3px 0 3px rgba(0,0,0,.3));
}
.l-tickets::after {
  content: '';
  position: absolute;
  height: 100%;
  width: 8rpx;
  top: 0;
  left: -8rpx;
  background: radial-gradient(circle at left center, transparent 8rpx, #FFB300 0) left center / 8rpx 20rpx;
}
.r-tickets {
	flex: 1;
  position: relative;
  background: radial-gradient(circle at left top, transparent 16rpx,  #ffc854 0,#ffcc61 100%) right top / 100% 50% no-repeat,
              radial-gradient(circle at left bottom, transparent 16rpx,  #ffc854 0,#ffcc61 100%) right bottom / 100% 50% no-repeat;
  filter: drop-shadow(3px 0 3px rgba(0,0,0,.3));
}
.r-tickets::before {
  content: '';
  width: 1rpx;
  background: linear-gradient(to top, #fff 0%, #fff 50%, transparent 50%) top left / 1rpx 20rpx repeat-y;
  position: absolute;
  left: 0;
  top: 16rpx;
  bottom: 16rpx;
} 
.r-tickets::after {
  content: '';
  position: absolute;
  height: 100%;
  width: 8rpx;
  top: 0;
  right: -8rpx;
  background: radial-gradient(circle at right center, transparent 8rpx, #ffcc61 0) right center / 8rpx 20rpx;
}

效果如下:
在这里插入图片描述

总结:

其实一开始锯齿有想过直接画圆遮盖,这样简单且方便,但是如果卡券所在的页面背景色不一样,那封装后就要调来调去,很不方便,而且加阴影也容易露馅,因此最后还是决定用渐变绘制了,虽然看起来有点难,但适用性特高,还是挺划算的~最后的最后,如果有不对的地方或更好的绘制方式欢迎各路神仙指正,小白一枚,努力学习ing。。。需要完整代码的可以私我ww

参考文章
CSS3径向渐变实现优惠券波浪造型
CSS绘制卡券、优惠券样式
CSS background 属性
CSS radial-gradient() 函数
CSS linear-gradient() 函数
CSS3 filter:drop-shadow滤镜与box-shadow区别应用

### 半圆形样式的实现 为了创建具有半圆效果的样式,可以利用`radial-gradient`来绘制两端的半圆形。下面是一个具体实例: ```css .card { width: 300px; height: 150px; position: relative; background-color: #ffcccb; /* 背景颜色 */ } /* 左侧半圆 */ .card::before, /* 右侧半圆 */ .card::after { content: &#39;&#39;; position: absolute; top: 0; bottom: 0; width: 50%; background-repeat: no-repeat; background-size: contain; z-index: -1; } .card::before { left: 0; border-radius: 100% 0 0 100%/75px 0 0 75px; background-image: radial-gradient(circle at right, white 25%, transparent 26%); } .card::after { right: 0; border-radius: 0 100% 100% 0/0 75px 75px 0; background-image: radial-gradient(circle at left, white 25%, transparent 26%); } ``` 上述代码定义了一个`.card`类用于构建基本容器,并通过`:before`和`:after`伪元素分别处理左端和右端的半圆形状[^1]。 对于更复杂的场景,比如想要在片顶部或底部也加入类似的凹陷效果,则可以在原有基础上进一步调整背景图像的位置参数以及增加额外的径向渐变层以达到所需视觉效果[^2]。 如果追求更加真实的打孔效果而非仅仅是平滑过渡的颜色变化,还可以考虑采用绝对定位配合固定尺寸的子元素模拟实际物理世界中的穿孔痕迹[^3]。 #### 示例HTML结构 ```html <div class="card"></div> ``` 此方法不仅适用于优惠券的设计,在其他需要类似装饰性边缘的应用场合同样有效果良好的表现。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值