一个项目需要用到优惠券,本打算切图,奈何优惠券内还有文字内容,不好适配,所以打算自己使用CSS画出这些仿淘宝、京东的优惠券样式。
radial-gradient()
使用radial-gradient径向渐变函数,可以实现一个圆形镂空的样子,在移动端,radial-gradient的兼容性也是相当完美。
CSS 语法
background: radial-gradient(shape size at position, start-color, …, last-color);
单个圆形镂空效果如下:
.base-one-circle {
width: 100px;
height: 100px;
position: relative;
background: radial-gradient(circle at 0px 50px, transparent 10px, #28A4F2 0) top
}
圆形的位置也可修改,只需要改“circle at…”后面这个两个数值即可,上,右,下的数值分别是:50px,0、100px,50px、50px,100px。
如果想要一个阴影状,带有立体感,可加上这个代码
filter: drop-shadow(3px 3px 3px rgba(0,0,0,.3))
完整的卡券样式
利用background: radial-gradient的特性,我们可以组合成更复杂、完整的优惠券样式:
.base-coupons {
width: 250px;
height: 100px;
position: relative;
background: radial-gradient(circle at right top, transparent 10px, #28A4F2 0) top left / 60px 51% no-repeat,
radial-gradient(circle at right bottom, transparent 10px, #28A4F2 0) bottom left /60px 51% no-repeat,
radial-gradient(circle at left top, transparent 10px, #eeeeee 0) top right /190px 51% no-repeat,
radial-gradient(circle at left bottom, transparent 10px, #eeeeee 0) bottom right /190px 51% no-repeat;
filter: drop-shadow(3px 3px 3px rgba(0,0,0,.3));
}
如果想要在卡券的拼接处加上虚线效果,我们可以利用伪类去实现:
.base-coupons::before {
content: '';
height: 80px;
border: 1px dashed #fff;
position: absolute;
left: 60px;
top: 0;
bottom: 0;
margin: auto;
}
那么最终的优惠券样式效果:
linear-gradient()
CSS 语法
background: linear-gradient(direction, color-stop1, color-stop2, …);
linear-gradient 函数是一个线性渐变函数,我们可以使用这个线性渐变加伪类来实现一个优惠券的锯齿状效果,如下:
实例
设计图
笔者的设计图中还有一个颜色深点的边框,中间border为实线,为了实现border效果,在上下的圆形镂空处用了两个半圆来覆盖添加border。
less代码:
@cardW: calc(~"100vw - 48rpx"); // 卡片宽度
@cleftW: 180rpx; // 左边部分宽度
@topH: 180rpx; // 卡片高度
@circleW: 10rpx; // 圆角宽度
.half-circle {
border: 2rpx solid #efd4d6;
width: @circleW * 2;
height: @circleW;
line-height: @circleW;
position: absolute;
z-index: 10;
left: calc(~"@{cleftW} - @{circleW}");
box-sizing: border-box;
}
.top-circle {
background-color: #fff;
border-top-color: #fff;
border-radius: 0 0px @circleW @circleW;
top: 0;
}
.bottom-circle {
background-color: #F6E1E5;
border-bottom-color: #F6E1E5;
border-radius: @circleW @circleW 0 0px;
top: calc(~"@{topH} - @{circleW}");
}
.bottom-circle.white-border {
background-color: #fff;
border-bottom-color: #fff;
}
.card-content {
box-sizing: border-box;
width: calc(~"100vw - 48rpx");
height: @topH;
position: relative;
border: 2rpx solid #efd4d6;
background: radial-gradient(circle at right top, transparent @circleW, #F8E9EB 0) top left / @cleftW 51% no-repeat,
radial-gradient(circle at right bottom, transparent @circleW, #F8E9EB 0) bottom left /@cleftW 51% no-repeat,
radial-gradient(circle at left top, transparent @circleW, #F8E9EB 0) top right /calc(~"@{cardW} - @{cleftW}") 51% no-repeat,
radial-gradient(circle at left bottom, transparent @circleW, #F8E9EB 0) bottom right /calc(~"@{cardW} - @{cleftW}") 51% no-repeat;
.card__left {
width: @cleftW;
border-right: 1px solid #efd4d6;
box-sizing: border-box;
background-color: #F8E9EB;
}
.ucc-content__right {
background-color: #F8E9EB;
}
}
绘制竖向优惠券的方法,传送门:https://blog.csdn.net/a1056244734/article/details/113999606