日常开发过程中,特别是商城相关应用开发过程中,时常会遇到花里胡哨的设计图,比如优惠券样式,上图:

实现思路如下:

    1.先写一个外容器,实现背景色渐变:

Html:

1 <div class="coupon">
2 </div>

Css:

 1 .coupon {
2 width: 600px;
3 height: 110px;
4 background: -webkit-linear-gradient(left, #d34b5a, #c64765);
5 background: -o-linear-gradient(left, #d34b5a, #c64765);
6 background: -moz-linear-gradient(left, #d34b5a, #c64765);
7 border-radius: 16px;
8 display: flex;
9 flex-direction: row;
10 }

效果:

    2.里面写左右两个容器,分别放置文本和按钮:

Html:

1 <div class="coupon">
2 <div class="coupon_text">
3 优惠券<text>¥20</text>
4 <span>使用期限:2021.01.21-2021.02.21</span>
5 </div>
6 <div class="coupon_btn">
7 <span>立即领取</span>
8 </div>
9 </div>

Css:

 1 .coupon_text {
2 flex: 1;
3 color: white;
4 padding: 25px 30px 20px 40px;
5 font-size: 20px;
6 position: relative;
7 }
8
9 .coupon_text > b {
10 font-size: 30px;
11 }
12
13 .coupon_text > div {
14 font-size: 15px;
15 }
16
17 .coupon_btn {
18 border: none;
19 height: 110px;
20 line-height: 110px;
21 padding: 0 40px;
22 }
23
24 .coupon_btn > span {
25 background: -webkit-linear-gradient(top, #fae8e9, #f2a799);
26 background: -o-linear-gradient(top, #fae8e9, #f2a799);
27 background: -moz-linear-gradient(top, #fae8e9, #f2a799);
28 padding: 10px 20px;
29 vertical-align: middle;
30 font-size: 24px;
31 border-radius: 30px;
32 color: #E41F19;
33     }

效果:

   3.画圆角和虚线:

我们在 .coupon_text 样式里添加css代码:

1       background-image: radial-gradient(circle at right top, #fff, #fff 15px, transparent 16px), 
radial-gradient(circle at right bottom, #fff, #fff 15px, transparent 16px);
2 border-right: 1px dashed #FFF;

再在 .coupon_btn 样式里添加如下代码:

1       background-image: radial-gradient(circle at left top, #fff, #fff 15px, transparent 16px), 
radial-gradient(circle at left bottom, #fff, #fff 15px, transparent 16px);

查看效果:

这个……好像和想象中有点不一样呀,不仅有白色的虚线,为啥还有红色的虚线呢?

那是因为前面我们外层class为coupon的div,设置了背景色,上层div的边框在虚线的地方是透明的,所以会间断显示红色背景,就成为我们看到的红色虚线了;

    在这里提供一个逼死强迫症的解决方案:

    把class为coupon_btn的div,向左移动1px;

.coupon_text {
margin-right: -1px;
} /* 或者 */ .coupon_btn {
margin-left: -1px;
}

    即可看到我们想要的效果:

    当然,实现上述设计图的方法有很多,欢迎交流~

OK,搞定收工,拿碗排队打饭!

如果有帮助到你,可以的话请帮我点个赞吧,谢谢~

CSS不用背景图片实现优惠券样式反圆角,凹圆角,反向半圆角,并且背景渐变的更多相关文章

  1. CSS background-image背景图片相关介绍

    这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...

  2. css代码添加背景图片常用代码

    css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; heigh ...

  3. vue打包后CSS中引用的背景图片不显示问题

    vue项目中,在css样式中引用了一张背景图片,开发环境下是可以正常显示,build之后背景图片不显示. 解决方法: 找到build/utils.js文件 修改成为如下所示内容:  添加红框中的内容即 ...

  4. CSS背景颜色、背景图片、平铺、定位、固定

    CSS背景颜色设置 background-color:red;如设置背景颜色为红色: 背景颜色设置支持3种写法: 颜色名 16进制 rgb CSS背景图片颜色设置 background-image:u ...

  5. 如何通过CSS实现背景图片自动平铺或拉伸至整个屏幕(自适应大小)

    默认情况下,通过HTML代码的BODY标签设置好背景图片<body background="x.jpg"> 后,图片会自动横向和纵向平铺.这就会产生一些美观上的问题. ...

  6. css网页中设置背景图片的方法详解

    在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等   用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...

  7. CSS3 background-image背景图片相关介绍

    这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...

  8. css-sprite 雪碧图的使用,合并多张小图,背景图片当按钮的设置

    背景图片基础: 使用background-image来设置背景图片 语法: background-image:url(相对与css的路径) 如果背景图片大于元素,默认会显示图片的左上角 如果背景图片和 ...

  9. qt 设置背景图片

    博客出处:http://www.cppblog.com/qianqian/archive/2010/07/25/121238.htm 工作似乎走上正轨了,上周五的工作是做一个界面,用到QFrame和Q ...

随机推荐

  1. 为什么Python多线程无法利用多核

    1.全局解释锁 如题: Python的多线程为什么不能利用多核处理器? 全局解释器锁(Global Interpreter Lock)是计算机程序设计语言解释器用于同步线程的一种机制,它使得任何时刻仅 ...

  2. MySQL中函数总结

    SQL中提供的函数: version() 查询当前数据库版本 user()   查询当前登录用户 database()    查询当前所在数据库 uuid()   返回uuid的值,分布式情况下数据库 ...

  3. windows Server 2016安装Sqlserver远程连接的坑

    如果要连接远程服务器 首先打开防火墙端口1433  新建入站规则 然后 如果没启用 就启用  然后重启服务就行 如果还是不行 进去属性  修改三处 然后重启服务

  4. vs2010新特性

    下面列出了一些新的功能:1.代码编辑器新的代码编辑器使代码更易于阅读.可以通过按 CTRL 并滚动鼠标轮放大文本.此外,单击 Visual C# 或 Visual Basic 中的符号时该符号的所有实 ...

  5. CSS的各种重要属性

    CSS属性图 01文字属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  6. AES 逻辑

    分组长度 加密逻辑 轮函数 参考:链接 字节代换 两种方法: 1.首先(将字节看做GF(28)上的元素,映射到自己的乘法逆元)换成人话就是(对多项式的逆,参考:链接):   其次,对字节做仿射变换 2 ...

  7. Java学习日报10.1

    学习内容一 ********************************** 代码 **********************************public class EnumTest ...

  8. C#扫盲篇(二)依赖倒置•控制反转•依赖注入•面向接口编程--满腹经纶的说

    扫盲系列的文章收到了广大粉丝朋友的支持,十分感谢,你们的支持就是我最大动力. 我的扫盲系列还会继续输出,本人也是一线码农,有什么问题大家可以一起讨论.也可以私信或者留言您想要了解的知识点,我们一起进步 ...

  9. 编写 Dockerfile 生成自定义镜像

    一般情况下我们可以从公共渠道诸如 DockerHub 获取镜像上获取镜像,但是在实际生产过程中,往往需要定制化的镜像,例如修改一些配置文件,增加一些特殊的命令或软件等需求,这时就需要通过编写 Dock ...

  10. Linux命令整理,用户管理,用户组管理,系统管理,目录管理常用命令

    知识点梳理 Linux课堂笔记 学习目标 能够知道什么是Linux系统以及它的应用场景 能够独立完成安装VMware虚拟机和网络配置 能够独立完成安装CentOS以及远程终端SecureCRT 能够熟 ...