CSS绘制卡券、优惠券样式
2019-09-27 本文已影响0人
月满轩尼诗_
一般做商城类的项目,为了商品促销,都会有优惠券的需求,如果有UI组可以切图那能省不少功夫,如果没有,那么我们自己也可使用CSS画出这些仿淘宝、京东的优惠券样式。
radial-gradient()
使用radial-gradient径向渐变函数,可以实现一个圆形镂空的样子,在移动端,radial-gradient的兼容性也是相当完美。
单个圆形镂空效果如下: image.pngCSS 语法
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))
image.png
完整的卡券样式
利用background: radial-gradient的特性,我们可以组合成更复杂、完整的优惠券样式:
image.png
.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;
}
那么最终的优惠券样式效果:
image.png
linear-gradient()
CSS 语法
background: linear-gradient(direction, color-stop1, color-stop2, ...);
linear-gradient 函数是一个线性渐变函数,我们可以使用这个线性渐变加伪类来实现一个优惠券的锯齿状效果,如下:
image.png.base-coupons::after {
content: '';
position: absolute;
height: 100%;
width:5px;
top: 0;
right: -5px;
background-image: linear-gradient(to bottom, #eeeeee 5px, transparent 5px, transparent),
radial-gradient(10px circle at 5px 10px, transparent 5px, #eeeeee 5px);
background-size: 5px 15px;
}