HTML css 实现各种优惠背景效果

作者:admin 发布时间:2024-05-24 15:31:49 浏览:1654次

用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>

更多完整的代码请参考:https://blog.csdn.net/yx_back/article/details/138327172

如需转载请保留本文出处: https://www.zhe94.com/975.html

上一篇:懂懂日记:一点委屈
下一篇:python 中文分词工具LAC和jieba
HTML css 实现各种优惠背景效果

HTML css 实现各种优惠背景效果

用CSS做优惠券背景,优惠券的本质其实是一个短期刺激消费的工具,它与积分刚好构成了日常营销的基本工具。消费者使用优惠券的目的不言而喻,当然是为了省钱。而同时,也为商家做了无形的广告。
python 中文分词工具LAC和jieba

python 中文分词工具LAC和jieba

python 中文分词工具有很多,今天主要分享两款很不错的分词工具,jieba和百度的lac
富文本编辑器wangEdiotr报错Error in callback for watcher "value": "Error: Cannot find a descendant at path [0,2] in node

富文本编辑器wangEdiotr报错Error in callback for watcher "value": "Error: Cannot find a descendant at path [0,2] in node

富文本编辑器wangEdiotr作为vue组件使用时,上传图片后,再打开报错Error in callback for watcher "value": "Error: Cannot find a descendant at path [0,2] in node
NVM管理nodejs的多个版本

NVM管理nodejs的多个版本

通过将多个node 版本安装在指定路径,然后通过 nvm 命令切换时,就会切换我们环境变量中 node 命令指定的实际执行的软件路径。 使用场景:比如我们手上同时在做好几个项目,这些项目的需求都不太一样,导致了这些个项目需要依赖的nodejs版本也不同,这种情况下,我们就可以通过nvm来切换nodejs的版本,而不需要频繁地下载/卸载不同版本的nodejs来满足当前项目的要求
AI工具集(国内版)汇总-更新至2024年

AI工具集(国内版)汇总-更新至2024年

AI工具集(国内版)汇总-更新至2024年
如何搭建一个自己的github?开源GitLab 的安装方法

如何搭建一个自己的github?开源GitLab 的安装方法

GitLab 是一款功能强大的版本控制工具,可实现代码管理、协作和部署的无缝工作流程。版本控制是指追踪和管理软件开发过程中对代码文件、配置文件和文档所做的更改