css实现简单优惠券卡券的方法

mt · 发表于 2021-8-31 11:34:19

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* .content{
-webkit-mask: radial-gradient(circle at left center, transparent 20px, red 20px);
} */
html{
height:100%;
}
body{
height:100%;
display:flex;
margin:0;
flex-direction: column;
}
.content {
width: 300px;
height: 150px;
margin: auto;
/* -webkit-mask: radial-gradient(circle at 0, transparent 20px, red 0); */
-webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0);
background: linear-gradient(45deg, orange, red);
}
.content1 {
width: 300px;
height: 150px;
margin: auto;
-webkit-mask: radial-gradient(circle at 0, transparent 20px, red 0), radial-gradient(circle at right, transparent 20px, blue 0);
-webkit-mask-size: 50%;
-webkit-mask-position: 0, 100%;
-webkit-mask-repeat: no-repeat;
background: linear-gradient(45deg, orange, red);
}
.content2 {
width: 300px;
height: 150px;
margin: auto;
-webkit-mask: radial-gradient(circle at 0, transparent 20px, red 0), radial-gradient(circle at right, transparent 20px, red 0);
-webkit-mask-composite: source-in;
background: linear-gradient(45deg, orange, red);
}
.content3 {
width: 300px;
height: 150px;
margin: auto;
-webkit-mask: radial-gradient(circle at 0 0, transparent 20px, red 0), radial-gradient(circle at right 0, transparent 20px, red 0), radial-gradient(circle at 0 100%, transparent 20px, red 0), radial-gradient(circle at right 100%, transparent 20px, red 0);
-webkit-mask-composite: source-in;
background: linear-gradient(45deg, orange, red);
}
.content4 {
width: 300px;
height: 150px;
margin: auto;
-webkit-mask: radial-gradient(circle at 20px, transparent 20px, red 0) -20px;
background: linear-gradient(45deg, orange, red);
}
.content5 {
width: 300px;
height: 150px;
margin: auto;
-webkit-mask: radial-gradient(circle at 20px 20px, transparent 20px, red 0) -20px -20px;
background: linear-gradient(45deg, orange, red);
}
.wrap{
width: 300px;
height: 150px;
min-width: 100px;
min-height: 100px;
margin: auto;
overflow: auto;
resize: both;
filter: drop-shadow(2px 2px 5px orange)
}
.content6 {
height: 100%;
margin: auto;
-webkit-mask: radial-gradient(circle at 20px 20px, transparent 20px, red 0) -20px -20px;
background: linear-gradient(45deg, orange, red);
}
</style>
</head>
<body>
<div class="content"></div>
<div class="content1"></div>
<div class="content2"></div>
<div class="content3"></div>
<div class="content4"></div>
<div class="content5"></div>
<div class="wrap">
<div class="content6"></div>
</div>
</body>
</html>
以上为常用的优惠券的css写法。

复制代码

如下图所示。

账号		自动登录	找回密码
密码			立即注册