CSS不规则卡片，纯CSS制作优惠券样式，CSSS实现锯齿样式
之前也有写过CSS优惠券样式《CSS3径向渐变实现优惠券波浪造型》，这次再来温习一遍，并且将更为详细的讲解，从布局到具体样式说明，最后定义CSS变量，自定义主题颜色。
布局
布局其实是学习前端的重要部分，最常用的方式就是从上而下、从左而右、亦或者两个相结合。
看上图，而这里，我们就只是最简单的布局方式，从上而下：
1、优惠券金额和过期时间
2、优惠券描述
3、按钮（其实按钮也可以放到“2”里面去）
这样分析，我们就有了html架构了
divclass=coupon!--1、优惠券金额和过期时间--divclass=price元span优惠券/spanpclass=timeout-12-:18:18过期/p/div!--2、优惠券描述--divclass=describep1、商城、美食可用/pp2、过期作废/p/div!--3、按钮--divclass=btnsbutton立即使用/button/div/div
CSS不规则卡片，纯CSS制作优惠券样式，CSSS实现锯齿样式
CSS修饰
接下来我们用CSS美化我们的html。同理，我们也根据布局分步进行样式书写。
1、优惠券金额和过期时间样式
这里的核心就是上方的凹槽和下方的锯齿
.coupon{background-color:#E0E0E0;width:px;/*css变量*/--main-color:#ECA;--f-color:#;}.price{position:relative;height:px;background-image:radial-gradient(circleatpx-8px,#fff20px,var(--main-color)21px);color:#fff;font-size:20px;text-align:center;padding-top:40px;}.price.timeout{color:var(--f-color);font-size:14px;margin-top:25px;}.pricespan{font-size:14px;}
CSS不规则卡片，纯CSS制作优惠券样式，CSSS实现锯齿样式
这里用到了径向渐变，不清楚用法的小伙伴可以看看语法：
background-image:radial-gradient(shapesizeatposition,start-color,...,last-color);
注释：
（1）、shape确定圆的类型:
ellipse(默认):指定椭圆形的径向渐变。
circle：指定圆形的径向渐变
（2）、size定义渐变的大小，可能值：
farthest-corner(默认):指定径向渐变的半径长度为从圆心到离圆心最远的角
closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边
（3）、position定义渐变的位置。可能值：
center（默认）：设置中间为径向渐变圆心的纵坐标值。
top：设置顶部为径向渐变圆心的纵坐标值。
bottom：设置底部为径向渐变圆心的纵坐标值。
（4）、start-color,...,last-color用于指定渐变的起止颜色。
这样价格上方的凹槽就有了，接下来下方的锯齿我们也可以用径向渐变的方式实现：
.price::after{position:absolute;content:;display:block;bottom:0px;height:10px;width:%;/*background-size:11pxpx;*/background-image:radial-gradient(circleat5px10px,#E0E0E06px,var(--main-color)7px);}伪类元素::after设置径向渐变背景为一个圆，后进行平铺就形成了锯齿，调整位置。
CSS不规则卡片，纯CSS制作优惠券样式，CSSS实现锯齿样式
其实还有更简单的方法，可以直接用一个虚线边框即可搞定，请看：
.price::after{position:absolute;content:;display:block;bottom:-5px;width:%;border-bottom:10pxdotted#E0E0E0;}
CSS不规则卡片，纯CSS制作优惠券样式，CSSS实现锯齿样式
当然也有缺陷，间隔位置不好控制
2、优惠券描述与按钮优惠券核心锯齿已经搞定了，下面都是小菜啦，非常简单咯
.describe{color:#;padding:10px;font-size:14px;}.btns{/*使其button可以居中*/text-align:center;}.btnsbutton{/*重置按钮样式*/border:none;box-shadow:none;outline:none;background-color:var(--main-color);color:#fff;width:50%;border-radius:20px;line-height:30px;margin:40pxpx;cursor:pointer;}
CSS不规则卡片，纯CSS制作优惠券样式，CSSS实现锯齿样式
主题颜色
大家都看到了，我们上方代码主要颜色都采用的变量，而且变量是定义在.coupon类选择器里面的。这样的原因是：
1、CSS变量作用域（CSS变量只能作用于自身以及后代元素。兄弟元素，祖先元素都不能享用。）
2、方便主题使用
ok，我们就可以copy多个优惠券，并给每个添加一个不同的class，比如下方的theme1、theme2、theme3
divclass=coupontheme1.../divdivclass=coupontheme2.../divdivclass=coupontheme3.../divdivclass=coupon.../div接下来我们就为不同主题定义不同的颜色变量
.coupon.theme1{--main-color:#8E24AA;--f-color:#fff;}.coupon.theme2{--main-color:#BE5;--f-color:#fff;}.coupon.theme3{--main-color:#26A69A;--f-color:#fff;}这样，theme1主题下的优惠券，就是紫色主题，theme2主题下的优惠券，就是蓝色主题...，而默认主题颜色就是我们.coupon类选择器里面的定义的变量颜色（红色）。
小结
今天你学到了吗？从布局分析到具体实现，再到主题颜色，相信小伙伴们都各有所得。
转载请注明：http://www.0431gb208.com/sjsbszl/3089.html
