CSS实现各种优惠券效果

一、左半圆效果

在这里插入图片描述

<style style="text/css">.coupon {width: 240px;height: 100px;margin-top: 15px;background-color: #ff6347;-webkit-mask: radial-gradient(circle at left center, transparent 20px, red 20px); }
</style><div class="coupon"></div>

二、左右半圆效果

在这里插入图片描述

<style type="text/css">
.coupon2 {width: 240px;height: 100px;margin-top: 15px;background-color: #F56C6C;-webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0), radial-gradient(circle at right, #0000 20px, red 0);-webkit-mask-size: 51%;-webkit-mask-position: 0, 100%;-webkit-mask-repeat: no-repeat;
}
</style>
<div class="coupon2"></div>

三、左内圆效果

在这里插入图片描述

<style type="text/css">
.coupon3 {width: 240px;height: 100px;margin-top: 15px;background-color: #F56C6C;-webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0); 
}
</style>
<div class="coupon3"></div>

四、四角收缩效果

在这里插入图片描述

<style type="text/css">
.coupon4 {width: 240px;height: 100px;margin-top: 15px;background-color: #F56C6C;-webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0); -webkit-mask-position: -20px -20px;
}
</style>
<div class="coupon4"></div>
缩写
.coupon4 {-webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px; 
}

五、六角收缩效果

在这里插入图片描述

<style type="text/css">
.coupon5 {width: 240px;height: 100px;margin-top: 15px;background-color: #F56C6C;-webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0); -webkit-mask-position: -20px -20px;-webkit-mask-size: 50%;
}
</style>
<div class="coupon5"></div>
缩写
.coupon5 {-webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%; 
}

六、凹边效果

在这里插入图片描述

<style type="text/css">
.coupon6 {width: 240px;height: 100px;margin-top: 15px;background-color: #F56C6C;-webkit-mask: radial-gradient(circle at 10px, #0000 10px, red 0); -webkit-mask-position: -10px;-webkit-mask-size: 100% 30px;
}
</style>
<div class="coupon6"></div>

七、中排圆点效果

在这里插入图片描述

<style type="text/css">
.coupon7 {width: 300px;height: 130px;margin-top: 15px;background-color: #F56C6C;-webkit-mask: radial-gradient( circle at 50%, red 5px, transparent 0) 50% 50% / 100% 20px, radial-gradient(circle at 20px 20px, transparent 20px, red 0) -20px -20px / 50%;-webkit-mask-composite: destination-out;
}
</style>
<div class="coupon7"></div>

八、两边凹陷效果

在这里插入图片描述

<style type="text/css">
.coupon8 {width: 240px;height: 100px;margin-top: 15px;background-color: #F56C6C;-webkit-mask: radial-gradient( circle at 5px, red 5px, transparent 0) -5px 50% / 100% 20px, radial-gradient(circle at 20px 20px, transparent 20px, red 0) -20px -20px / 50%;-webkit-mask-composite: destination-out;
}
</style>
<div class="coupon8"></div>

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

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

相关文章

【函数式接口使用✈️✈️】配合策略模式实现文件处理的案例

目录 &#x1f378;前言 &#x1f37b;一、功能描述 &#x1f37a;二、面向对象设计模式 &#x1f379;三、策略模式 &#x1f366;四、策略 VS 面向对象 &#x1f368;章末 &#x1f378;前言 小伙伴们大家好&#xff0c;上周初步了解了下函数式接口&#xff0c;Consume…

认识Linux及一些基本

目录 linux简介&#xff1a; 1. 发展史 UNIX发展的历史 Linux发展历史 2. 开源 3. 企业应用现状 Linux在服务器领域的发展 Linux在桌面领域的发展 Linux在移动嵌入式领域的发展 Linux在云计算/大数据领域的发展 4. 发行版本 Debian Ubuntu 红帽企业级Linux Cent…

IIS中搭建.Net Core项目,步骤详解

一、准备服务器 1&#xff09;安装IIS 这个比较简单&#xff0c;百度一下就行 2&#xff09;安装 .NET Core 运行时 下载地址&#xff1a;下载 .NET(Linux、macOS 和 Windows) 因为我是本地开发&#xff0c;所以我下载的是SDK 安装成功之后显示如下&#xff1a; 检查是否安装…

边OTG边充电芯片LDR6500

随着科技的飞速发展&#xff0c;智能移动设备已成为我们生活中不可或缺的一部分。而在这些设备的连接与数据传输中&#xff0c;Type-C接口以其高效、便捷的特性逐渐占据了主导地位。OTG&#xff08;On-The-Go&#xff09;技术则进一步扩展了Type-C接口的功能&#xff0c;使得设…

Hadoop3:集群搭建及常用命令与shell脚本整理(入门篇,从零开始搭建)

一、集群环境说明 1、用VMware安装3台Centos7.9虚拟机 2、虚拟机配置&#xff1a;2C&#xff0c;2G内存&#xff0c;50G存储 3、集群架构 从表格中&#xff0c;可以看出&#xff0c;Hadoop集群&#xff0c;主要有2部分&#xff0c;一个是HDFS服务&#xff0c;一个是YARN服务 …

win11 安装qt5.14.2 、qtcreator、vs编译器 。用最小安装进行 c++开发qt界面

系统 &#xff1a;win11 一、安装vs生成工具 &#xff0c;安装编译器 下载visualstudio tools 生成工具&#xff1a; 安装编译器 和 windows sdk&#xff1a; 安装debug 调试器&#xff1a; 二、Qt5.14.2下载 下载链接: Index of /archive/qt/5.14/5.14.2 安装qt 三、配置QT/…

(十三)Servlet教程——Servlet中Cookie的使用

1.什么是Cookie Cookie意为甜饼&#xff0c;最早由Netscape社区发展的一种机制。目前Cookie已经成为标准&#xff0c;所有的主流浏览器都支持Cookie。 由于HTTP是一种无状态的协议&#xff0c;服务器仅从网络连接上无法知道客户身份。于是就客户端颁发一个通行证&#xff0c;无…

神之浩劫2测试在哪下载 神之浩劫2客户端下载教程

在备受玩家喜爱的第三人称动作MOBA《神之浩劫》的辉煌基础上&#xff0c;其续作《神之浩劫2》宣布将于5月3日&#xff08;北京时间&#xff09;正式启动Alpha测试旅程&#xff0c;首度揭开神秘面纱&#xff0c;14位英勇角色静候被选中的探险者。此番&#xff0c;《神之浩劫2》的…

unity项目《样板间展示》开发:逻辑代码实现

unity项目《样板间展示》开发&#xff1a;逻辑代码实现 前言漫游逻辑实现UI功能逻辑实现静态光线问题解决结语 前言 这个项目的教程文章已经断更三个月之久&#xff0c;现向学习该项目dome的小伙伴们致歉。 断更原因嘛&#xff0c;就是实习工作&#xff0c;后续我也会发布相关的…

注意力机制(四)(多头注意力机制)

​&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;《深度学习基础知识》 相关专栏&#xff1a; ⚽《机器学习基础知识》 &#x1f3d0;《机器学习项目实战》 &#x1f94e;《深度学习项目实…

virtualbox 网络设置实现主机和虚拟机互相访问

前言 一般来说&#xff0c;virtualbox 虚拟机的上网模式是 NAT。这样虚拟机可以上网并访问宿主机&#xff0c;但宿主机无法访问虚拟机&#xff0c;也无法 ping 通。下面介绍双网卡模式&#xff0c;实现虚拟机和宿主机能够互相访问 ping 通。 双网卡模式 进入虚拟机的网络设置…

串联超前及对应matlab实现

串联超前校正它的本质是利用相角超前的特性提高系统的相角裕度。传递函数为&#xff1a;下面将以一个实际的例子&#xff0c;使用matlab脚本&#xff0c;实现其校正后的相位裕度≥60。

微服架构基础设施环境平台搭建 -(六)Kubesphere 部署Redis服务 设置访问Redis密码

微服架构基础设施环境平台搭建 -&#xff08;六&#xff09;Kubesphere 部署Redis服务 & 设置访问Redis密码 微服架构基础设施环境平台搭建 系列文章 微服架构基础设施环境平台搭建 -&#xff08;一&#xff09;基础环境准备 微服架构基础设施环境平台搭建 -&#xff08;二…

使用CSS3 + Vue3 + js-tool-big-box工具,实现炫酷五一倒计时动效

时间过得真是飞速&#xff0c;很快又要到一年一度的五一劳动节啦&#xff0c;今年五天假&#xff0c;做好准备了吗&#xff1f;今天我们用CSS3 Vue3 一个前端工具库 js-tool-big-box来实现一个炫酷的五一倒计时动效吧。 目录 1 先制作一个CSS3样式 2 Vue3功能提前准备 3…

MySQL--mysql的安装(压缩包安装保姆级教程)

官网下载&#xff1a;www.mysql.com MySQL :: Download MySQL Community Server (Archived Versions) 1.MySQL下载流程&#xff1a; 第一步&#xff1a;点击download&#xff0c; 下滑找到MySQL community&#xff08;gpl&#xff09;Downloads>> 第二步&#xff1a;点…

《小倩》撤档五一,光线动画神话宇宙出师未捷

临近五一假期&#xff0c;光线动画的《小倩》突然宣布撤档&#xff0c;退出了五一档的争夺。 作为光线动画成立以来倾力打造的中国神话宇宙的第一部电影&#xff0c;《小倩》的市场关注度不言而喻&#xff0c;尤其是在今年五一档撞上两部大热日本动画电影&#xff0c;正面交锋…

VPN的基本概念

随着互联网的普及和应用的广泛&#xff0c;网络安全和隐私保护越来越受到人们的关注。在这个信息爆炸的时代&#xff0c;我们的个人信息、数据通信可能会受到各种威胁&#xff0c;如何保护自己的隐私和数据安全成为了一个迫切的问题。而VPN&#xff08;Virtual Private Network…

pytho爬取南京房源成交价信息并导入到excel

# encoding: utf-8 # File_name: import requests from bs4 import BeautifulSoup import xlrd #导入xlrd库 import pandas as pd import openpyxl# 定义函数来获取南京最新的二手房房子成交价 def get_nanjing_latest_second_hand_prices():cookies {select_city: 320100,li…

人脸识别系统架构

目录 1. 系统架构 1.1 采集子系统 1.2 解析子系统 1.3 存储子系统 1.4 比对子系统 1.5 决策子系统 1.6 管理子系统 1.7 应用开放接口 2. 业务流程 2.1 人脸注册 2.2 人脸验证 2.2.1 作用 2.2.2 特点 2.2.3 应用场景 2.3 人脸辨识 2.3.1 作用 2.3.2 特点 2.3.3…

大珩PPT助手一键颜色设置

大珩PPT助手最新推出的一键设置文字颜色和背景色功能&#xff0c;为用户在创建演示文稿时带来了更便捷、高效的体验。这一功能使用户能够轻松调整演示文稿中文字的颜色和幻灯片的背景色&#xff0c;以满足不同场合和主题的需要。 以下是该功能的几个关键特点和优势&#xff1a…