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

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

用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://zhe94.com/975.html

上一篇:懂懂日记:一点委屈
vs code 的常用快捷键

vs code 的常用快捷键

Visual Studio Code是个一款非常优秀的代码编辑工具,支持多种编程语言的编写。工具很常用,要想用得溜还得记记快捷键,把技巧记下来,编写代码大大提高工作效率,事半功倍。
Mysql关联表查询怎么样才能只取最新一条记录

Mysql关联表查询怎么样才能只取最新一条记录

有时我们使用mysql的时候想要多个表查询数据,但是关联查询的时候有多条记录,我们只想要最新的一条记录怎么办呢?很多人第一时间想到的是使用group by 处理,这是没问题的,但是需要提取做些处理,要是直接查询出来的数据可能并不准确。