之前也有写过 CSS 优惠券样式《CSS3径向渐变实现优惠券波浪造型》,这次再来温习一遍,并且将更为详细的讲解,从布局到具体样式说明,最后定义 CSS 变量,自定义主题颜色。
布局
布局 其实是学习前端的重要部分,最常用的方式就是从上而下、从左而右、亦或者两个相结合。
看上图,而这里,我们就只是最简单的布局方式,从上而下:
1、优惠券金额和过期时间
2、优惠券描述
3、按钮(其实按钮也可以放到“2”里面去)
这样分析,我们就有了 html 架构了
CSS修饰
接下来我们用 CSS 美化我们的 html 。同理,我们也根据布局分步进行样式书写。
1、优惠券金额和过期时间样式
这里的核心就是上方的凹槽和下方的锯齿
这里用到了
background-image: radial-gradient(shape size at position, 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 用于指定渐变的起止颜色。
这样价格上方的凹槽就有了,接下来下方的锯齿我们也可以用 径向渐变 的方式实现:
伪类元素 ::after 设置径向渐变背景为一个圆,后进行平铺就形成了锯齿,调整位置。
其实还有更简单的方法,可以直接用一个虚线边框即可搞定,请看:
当然也有缺陷,间隔位置不好控制
2、优惠券描述与按钮
优惠券核心锯齿已经搞定了,下面都是小菜啦,非常简单咯
主题颜色
大家都看到了,我们上方代码主要颜色都采用的变量,而且变量是定义在 .coupon 类选择器里面的。这样的原因是:
1、CSS变量作用域(CSS变量只能作用于自身以及后代元素。兄弟元素,祖先元素都不能享用。)
2、方便主题使用
ok,我们就可以copy 多个 优惠券,并给每个添加一个不同的 class,比如下方的 theme1、theme2、theme3
接下来我们就为不同主题定义不同的颜色变量
这样,theme1主题下的优惠券,就是紫色主题,theme2主题下的优惠券,就是蓝色主题...,而默认主题颜色就是我们 .coupon 类选择器里面的定义的变量颜色(红色)。
在线演示示例
小结
今天你学到了吗?从布局分析到具体实现,再到主题颜色,相信小伙伴们都各有所得。