百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

CSS不规则卡片,纯CSS制作优惠券样式,CSS实现锯齿样式

yuyutoo 2025-02-21 16:00 26 浏览 0 评论

之前也有写过 CSS 优惠券样式《CSS3径向渐变实现优惠券波浪造型》,这次再来温习一遍,并且将更为详细的讲解,从布局到具体样式说明,最后定义 CSS 变量,自定义主题颜色。

布局

布局 其实是学习前端的重要部分,最常用的方式就是从上而下、从左而右、亦或者两个相结合。

看上图,而这里,我们就只是最简单的布局方式,从上而下:

1、优惠券金额和过期时间

2、优惠券描述

3、按钮(其实按钮也可以放到“2”里面去)

这样分析,我们就有了 html 架构了

100元 优惠券

2020-12-31 18:18:18过期

1、商城、美食可用

2、过期作废

CSS修饰

接下来我们用 CSS 美化我们的 html 。同理,我们也根据布局分步进行样式书写。

1、优惠券金额和过期时间样式

这里的核心就是上方的凹槽和下方的锯齿

.coupon{
  background-color: #E0E0E0;
  width: 200px;
  /* css变量 */
  --main-color: #EC407A;
  --f-color: #444;
}
.price {
  position: relative;
  height: 120px;
  background-image: radial-gradient(
      circle at 100px -8px, #fff 20px, 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;
}
.price span{
  font-size: 14px;
}

这里用到了 径向渐变,不清楚用法的小伙伴可以看看语法:

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 用于指定渐变的起止颜色。

这样价格上方的凹槽就有了,接下来下方的锯齿我们也可以用 径向渐变 的方式实现:

.price::after{
  position: absolute;
  content: '';
  display: block;
  bottom: 0px;
  height: 10px;
  width: 100%;
  /* background-size: 11px 200px; */
  background-image: 
    radial-gradient(
    circle at 5px 10px, 
    #E0E0E0 6px, 
    var(--main-color) 7px);
}

伪类元素 ::after 设置径向渐变背景为一个圆,后进行平铺就形成了锯齿,调整位置。

其实还有更简单的方法,可以直接用一个虚线边框即可搞定,请看:

.price::after{
  position: absolute;
  content: '';
  display: block;
  bottom: -5px;
  width: 100%;
  border-bottom: 10px dotted #E0E0E0;
}

当然也有缺陷,间隔位置不好控制

2、优惠券描述与按钮 优惠券核心锯齿已经搞定了,下面都是小菜啦,非常简单咯

.describe{
  color: #333;
  padding: 10px;
  font-size: 14px;
}
.btns {
  /* 使其button可以居中 */
  text-align: center;
}
.btns button{
  /* 重置按钮样式 */
  border: none;
  box-shadow: none;
  outline: none;

  background-color: var(--main-color);
  color: #fff;
  width: 50%;
  border-radius: 20px;
  line-height: 30px;
  margin: 40px 0 20px;
  cursor: pointer;
}

主题颜色

大家都看到了,我们上方代码主要颜色都采用的变量,而且变量是定义在 .coupon 类选择器里面的。这样的原因是:

1、CSS变量作用域(CSS变量只能作用于自身以及后代元素。兄弟元素,祖先元素都不能享用。)

2、方便主题使用

ok,我们就可以copy 多个 优惠券,并给每个添加一个不同的 class,比如下方的 theme1、theme2、theme3

...
...
...
...

接下来我们就为不同主题定义不同的颜色变量

.coupon.theme1{
  --main-color: #8E24AA;
  --f-color: #fff;
}

.coupon.theme2{
  --main-color: #039BE5;
  --f-color: #fff;
}

.coupon.theme3{
  --main-color: #26A69A;
  --f-color: #fff;
}

这样,theme1主题下的优惠券,就是紫色主题,theme2主题下的优惠券,就是蓝色主题...,而默认主题颜色就是我们 .coupon 类选择器里面的定义的变量颜色(红色)。

小结

今天你学到了吗?从布局分析到具体实现,再到主题颜色,相信小伙伴们都各有所得。

相关推荐

当 Linux 根分区 (/) 已满时如何释放空间?

根分区(/)是Linux文件系统的核心,包含操作系统核心文件、配置文件、日志文件、缓存和用户数据等。当根分区满载时,系统可能出现无法写入新文件、应用程序崩溃甚至无法启动的情况。常见原因包括:...

玩转 Linux 之:磁盘分区、挂载知多少?

今天来聊聊linux下磁盘分区、挂载的问题,篇幅所限,不会聊的太底层,纯当科普!!1、Linux分区简介1.1主分区vs扩展分区硬盘分区表中最多能存储四个分区,但我们实际使用时一般只分为两...

Linux 文件搜索神器 find 实战详解,建议收藏

在Linux系统使用中,作为一个管理员,我希望能查找系统中所有的大小超过200M文件,查看近7天系统中哪些文件被修改过,找出所有子目录中的可执行文件,这些任务需求...

Linux 操作系统磁盘操作(linux 磁盘命令)

一、文档介绍本文档描述Linux操作系统下多种场景下的磁盘操作情况。二、名词解释...

Win10新版19603推送:一键清理磁盘空间、首次集成Linux文件管理器

继上周四的Build19592后,微软今晨面向快速通道的Insider会员推送Windows10新预览版,操作系统版本号Build19603。除了一些常规修复,本次更新还带了不少新功能,一起来了...

Android 16允许Linux终端使用手机全部存储空间

IT之家4月20日消息,谷歌Pixel手机正朝着成为强大便携式计算设备的目标迈进。2025年3月的更新中,Linux终端应用的推出为这一转变奠定了重要基础。该应用允许兼容的安卓设备...

Linux 系统管理大容量磁盘(2TB+)操作指南

对于容量超过2TB的磁盘,传统MBR分区表的32位寻址机制存在限制(最大支持2.2TB)。需采用GPT(GUIDPartitionTable)分区方案,其支持64位寻址,理论上限为9.4ZB(9....

Linux 服务器上查看磁盘类型的方法

方法1:使用lsblk命令lsblk输出说明:TYPE列显示设备类型,如disk(物理磁盘)、part(分区)、rom(只读存储)等。...

ESXI7虚机上的Ubuntu Linux 22.04 LVM空间扩容操作记录

本人在实际的使用中经常遇到Vmware上安装的Linux虚机的LVM扩容情况,最终实现lv的扩容,大多数情况因为虚机都是有备用或者可停机的情况,一般情况下通过添加一块物理盘再加入vg,然后扩容lv来实...

5.4K Star很容易!Windows读取Linux磁盘格式工具

[开源日记],分享10k+Star的优质开源项目...

Linux 文件系统监控:用脚本自动化磁盘空间管理

在Linux系统中,文件系统监控是一项非常重要的任务,它可以帮助我们及时发现磁盘空间不足的问题,避免因磁盘满而导致的系统服务不可用。通过编写脚本自动化磁盘空间管理,我们可以更加高效地处理这一问题。下面...

Linux磁盘管理LVM实战(linux实验磁盘管理)

LVM(逻辑卷管理器,LogicalVolumeManager)是一种在Linux系统中用于灵活管理磁盘空间的技术,通过将物理磁盘抽象为逻辑卷,实现动态调整存储容量、跨磁盘扩展等功能。本章节...

Linux查看文件大小:`ls`和`du`为何结果不同?一文讲透原理!

Linux查看文件大小:ls和du为何结果不同?一文讲透原理!在Linux运维中,查看文件大小是日常高频操作。但你是否遇到过以下困惑?...

使用 df 命令检查服务器磁盘满了,但用 du 命令发现实际小于磁盘容量

在Linux系统中,管理员或开发者经常会遇到一个令人困惑的问题:使用...

Linux磁盘爆满紧急救援指南:5步清理释放50GB+小白也能轻松搞定

“服务器卡死?网站崩溃?当Linux系统弹出‘Nospaceleft’的红色警报,别慌!本文手把手教你从‘删库到跑路’进阶为‘磁盘清理大师’,5个关键步骤+30条救命命令,快速释放磁盘空间,拯救你...

取消回复欢迎 发表评论: