CSS优惠券、卡券样式绘制

实现左右凹陷中间有虚线效果

效果图

在这里插入图片描述

实现思路

从效果图可以看到这个优惠券是左右两边凹陷,中间还有一条虚线,为了封装后插槽使用方便,把优惠券以虚线为准分了两部分。这样布局的好处是上部分内容和下部分都可以自定义,不受内容限制。

实现代码

<style style="text/css">.tickets {padding: 10px;width: 300px;box-sizing: border-box;}
.t-tickets {min-height: 50px;border-radius: 12px 12px 0 0;background-color: bisque;box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.04);-webkit-mask: radial-gradient(circle at 0 bottom, #0000 8px, red 0), radial-			gradient(circle at right bottom, #0000 8px, red 0);-webkit-mask-size: 51%;-webkit-mask-position: 0, 100%;-webkit-mask-repeat: no-repeat;}.b-tickets{position: relative;min-height: 50px;width: 100%;border-radius: 0 0 12px 12px;background-color: bisque;box-shadow: 0rpx 3px 8px 0px rgba(0,0,0,0.04);-webkit-mask: radial-gradient(circle at 0 top, #0000 8px, red 0), radial-gradient(circle at right top, #0000 8px, red 0);-webkit-mask-size: 51%;-webkit-mask-position: 0, 100%;-webkit-mask-repeat: no-repeat;
}.line{width: calc(100% - 20px);border-bottom: 1px dotted #fff;margin: 0 10px;
}
</style><div class="tickets"><div class="t-tickets"></div><div class="b-tickets"><div class="line"></div></div>
</div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/318169.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

面试:Mybatis(MyBatis执行流程、延迟加载、MyBatis的缓存)

目录 一、MyBatis执行流程 二、MyBatis是否支持延迟加载&#xff1f; 1、什么是延迟加载&#xff1f; 2、延迟加载的原理 三、MyBatis的缓存 1、一级缓存 2、二级缓存 3、注意事项 一、MyBatis执行流程 读取MyBatis配置文件: mybatis-config.xml加载运行环境和映射文件构…

Adobe推出AI视频超分辨率工具VideoGigaGAN

&#x1f989; AI新闻 &#x1f680; Adobe推出AI视频超分辨率工具VideoGigaGAN 摘要&#xff1a;Adobe公司最新推出的AI工具VideoGigaGAN&#xff0c;利用上采样技术将视频分辨率从128128提升至10241024。这一工具基于GigaGAN模型开发&#xff0c;专注于生成视频超分辨率&am…

Vitis HLS 学习笔记--MAXI手动控制突发传输

目录 1. 简介 2. MAXI 突发传输详解 2.1 突发传输的前置条件 2.2 hls::burst_maxi 详解 2.2.1 基本知识 2.2.2 hls::burst_maxi 构造函数 2.2.3 hls::burst_maxi 读取方法 2.2.4 hls::burst_maxi 写入方法 2.3 示例一 2.4 示例二 3. 总结 1. 简介 这篇文章探讨了在…

提示词工程入门-使用文心一言4.0-通义千问-GPT4-Claude3通用提示技巧测试

提示词工程基础&#x1f680; 在了解完了大语模型的基本知识&#xff0c;例如API的使用多轮对话&#xff0c;流式输出&#xff0c;微调&#xff0c;知识向量库等知识之后&#xff0c;接下来需要进一步补足的一个大块就是提示词工程&#xff0c;学习和了解提示词工程除了基本的提…

分享自己一篇在亚马逊云科技AWS官网发的Blog技术文章

小李哥在亚马逊AWS官网&#xff0c;作为第一作者发了自己的第一篇AWS Blog文章&#xff0c;也是自己今年在AWS官网的第11篇文章。文章主要内容是描述为出海的金融企业&#xff0c;搭建满足PCI-DSS合规、FIPS 140-2 Level 3安全标准的传输中数据加密云端方案&#xff0c;主要用于…

34.Docker基本操作

镜像相关的命令 镜像名称分为两部分组成&#xff1a;[repository]:[tag],tag就是镜像的版本。如果tag没有指定默认就是latest,表示最新版本的镜像。 查看docker命令的帮助信息 docker --help 具体某条命令的帮助信息 docker images --help 案例一&#xff1a;从DockerHub中…

无人机+飞行汽车:低空经济新引擎,有望爆发式增长

无人机和飞行汽车作为低空经济的新引擎&#xff0c;正在引领一场全新的交通革命。随着技术的不断进步和政策的支持&#xff0c;低空经济有望成为未来经济发展的重要领域&#xff0c;实现爆发式增长。 首先&#xff0c;无人机和飞行汽车具有独特的优势和应用场景。无人机可以在…

iOS ------ Method Swizzling (动态方法交换)

一&#xff0c;Method Swizzling 简介 Method&#xff08;方法&#xff09;对应的是objc_method结构体&#xff1b;而objc_method结构体中包含了SEL method_name(方法名&#xff09;&#xff0c;IMP method_imp&#xff08;方法实现&#xff09; // objc_method 结构体 typed…

自动化测试 selenium基础

前言 我们都知道测试开发工程师的任务是根据用户需求测试用例的同时,害的开发自动化工具来减轻测试压力且提高测试的效率以及质量,这一节我们就来简单谈谈开发简单的自动化工具基础 什么是自动化测试呢?就是将我们需要做的测试交给机器去做,也就是使用代码来模拟人对于机器的行…

Midjourney之绘画背景的选择

hello 小伙伴们&#xff0c;我是你们的老朋友——树下&#xff0c;今天分享Midjourney提示词中绘画背景的选择&#xff0c;话不多说&#xff0c;直接开始~ 对于背景的选择&#xff0c;Midjourney中主要体现在年代和所处的环境对绘画产生不同的影响 科技的发展&#xff0c;我们…

[软件工具]批量根据文件名查找PDF文件复制到指定的地方,如何批量查找文件复制,多个文件一起查找复制

多个文件目录下有多个PDF, 如何根据文件名一个清单&#xff0c;一次性查找多个PDF复制保存 如图所示下面有7个文件夹&#xff0c;每个文件夹里面有几百上千PDF文件 如何从上千个PDF文件中一次性快速找到我们要的文件呢 &#xff1f; 我们需要找到文件名是这样的PDF&#xff0…

Word文件导出为PDF

Word文件导出为PDF 方法一、使用Word自带另存为PDF功能 打开需要转换为PDF格式的Word文件&#xff0c;依次点击【文件】➡【另存为】➡选择文件保存类型为.PDF 使用这种方法导出的PDF可能存在Word中书签丢失的情况&#xff0c;在导出界面点击&#xff0c;选项进入详细设置 勾…

SpringMVC进阶(过滤器解决中文乱码,处理json以及文件上传下载)

文章目录 1.中文乱码处理1.引出问题1.恢复原来取消掉的属性绑定2.启动服务器&#xff0c;引出问题 2.自定义中文乱码过滤器1.MyCharacterFilter.java2.web.xml配置过滤器&#xff08;这个解决乱码的过滤器放到最前面&#xff09;3.结果展示 3.使用Spring过滤器处理&#xff08;…

基于YOLOV8+Pyqt5无人机航拍太阳能电池板检测系统

1.YOLOv8的基本原理 YOLOv8是一种前沿的目标检测技术&#xff0c;它基于先前YOLO版本在目标检测任务上的成功&#xff0c;进一步提升了性能和灵活性&#xff0c;在精度和速度方面都具有尖端性能。在之前YOLO 版本的基础上&#xff0c;YOLOv8 引入了新的功能和优化&#xff0c;…

数据结构 - C/C++

快速跳转 数组链表栈队列串树 目录 数据结构 逻辑结构 物理结构 数据结构 数据 数据不仅仅包括整型、实型等数值类型&#xff0c;还包括字符及声音、图像、视频等非数值类型。 计算机可以理解并按照指定格式处理。 结构 元素相互之间存在一种或多种特定关系的数据集合。 …

Java-异常处理-定义三角形类Triangle和异常三角形IllegalTriangleException类 (1/2)

任意一个三角形&#xff0c;其任意两边之和大于第三边。当三角形的三条边不满足前述条件时&#xff0c;就表示发生了异常&#xff0c;将这种异常情况定义为IllegalTriangleException类。 自定义异常类IllegalTriangleException&#xff1a; 当三角形的三条边不满足条件&#x…

Unreal 编辑器工具 批量重命名资源

右键 - Editor Utilities - Editor Utility Blueprint&#xff0c;基类选择 Asset Action Utility 在类默认值内&#xff0c;可以添加筛选器&#xff0c;筛选指定的类型 然后新建一个函数&#xff0c;加上4个输入&#xff1a;ReplaceFrom&#xff0c;ReplaceTo&#xff0c;Add…

PotatoPie 4.0 实验教程(32) —— FPGA实现摄像头图像浮雕效果

什么是浮雕效果&#xff1f; 浮雕效果是一种图像处理技术&#xff0c;用于将图像转换为看起来像浮雕一样的效果&#xff0c;给人一种凸起或凹陷的立体感觉&#xff0c;下面第二张图就是图像处理实现浮雕效果。 不过这个图是用Adobe公司的PS人工P图实现的&#xff0c;效果比较…

使用unreal engine5.3.2创建c++第一人称游戏

UE5系列文章目录 文章目录 UE5系列文章目录前言一、NuGet 简介二、解决方法&#xff1a; 前言 为了使用unreal engine5.3.2创建c第一人称游戏&#xff0c;今天安装了Visual Studio 2022专业版。在ue5中创建c工程&#xff0c;结果编译器报错&#xff1a; 严重性 代码 说明 项目…

酒水门店私域流量运营搭建执行规划方案

【干货资料持续更新&#xff0c;以防走丢】 酒水门店私域流量运营搭建执行规划方案 部分资料预览 资料部分是网络整理&#xff0c;仅供学习参考。 PPT可编辑&#xff08;完整资料包含以下内容&#xff09; 目录 精酿啤酒品牌私域执行运营的内容策划&#xff0c;涉及以下几个…