<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>卡券</title>
</head>
<style>
:root {
--bg: #222;
}
body {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 50px 0;
background-color: #222;
}
.circle01 {
width: 300px;
height: 100px;
position: relative;
/* background-color:#ff6810 ; */
/* background:radial-gradient(circle at 150px 100px, transparent 10px, #ff6810 0) top left; */
background: radial-gradient(
circle at 150px 100px,
transparent 10px,
#ff6810 0
)
top left/300px 100% no-repeat;
/* -webkit-mask: radial-gradient(circle at 150px 100px, transparent 10px, #ff6810 0) top left/300px 100% no-repeat; */
border-radius: 10px;
}
.mb20 {
margin-bottom: 20px;
}
.circle01_top {
width: 300px;
height: 100px;
position: relative;
border-radius: 10px;
background: radial-gradient(
circle at 150px 0,
transparent 10px,
#ff6810 0
)
top left/300px 100% no-repeat;
}
.circle01_left {
width: 300px;
height: 100px;
position: relative;
border-radius: 10px;
background: radial-gradient(circle at 0 50px, transparent 10px, #ff6810 0)
top left;
}
.circle01_right {
width: 300px;
height: 100px;
position: relative;
border-radius: 10px;
background: radial-gradient(
circle at 300px 50px,
transparent 10px,
#ff6810 0
)
top left;
}
.circle01_d1 {
width: 300px;
height: 100px;
position: relative;
border-radius: 10px;
background: radial-gradient(circle at 10px, transparent 10px, #ff6810 0) -10px;
}
.circle01_d2 {
width: 300px;
height: 100px;
position: relative;
border-radius: 10px;
overflow: hidden;
background: radial-gradient(circle at 10px, transparent 5px, #ff6810 0px);
/* background: radial-gradient(circle at 10px, transparent 10px, #ff6810 0) top left/84px; */
/* background: radial-gradient(circle at 10px, transparent 10px, #ff6810 0) top left/21px; */
}
.circle01_d3 {
width: 300px;
height: 100px;
position: relative;
border-radius: 10px;
background: radial-gradient(circle at 10px, transparent 5px, #ff6810 0)
top left/300px 20px;
}
.circle01_d4 {
width: 300px;
height: 100px;
position: relative;
border-radius: 10px;
background: radial-gradient(
circle at 150px 0,
transparent 10px,
#ff6810 0
);
}
.circle01_d5 {
width: 300px;
height: 100px;
border-radius: 10px;
background: radial-gradient(circle at 0 0, transparent 10px, red 0),
radial-gradient(circle at right 0, transparent 10px, red 0),
radial-gradient(circle at 0 100%, transparent 10px, red 0),
radial-gradient(circle at right 100%, transparent 10px, red 0);
/* -webkit-mask-composite: source-in;
background: linear-gradient(45deg, #44C9A1, #48e5a4); */
}
.circle02 {
width: 300px;
height: 100px;
border-radius: 10px;
position: relative;
background: radial-gradient(
circle at right top,
transparent 10px,
#ff6810 0
)
top left / 60px 51% no-repeat,
radial-gradient(circle at right bottom, transparent 10px, #ff6810 0)
bottom left / 60px 51% no-repeat,
radial-gradient(circle at left top, transparent 10px, #eeeeee 0) top
right / 240px 51% no-repeat,
radial-gradient(circle at left bottom, transparent 10px, #eeeeee 0)
bottom right / 240px 51% no-repeat;
filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
}
.circle02::after {
content: "";
height: 80px;
border: 1px dashed #fff;
position: absolute;
left: 60px;
top: 0;
bottom: 0;
margin: auto;
}
.circle03 {
border-radius: 10px;
width: 300px;
height: 100px;
position: relative;
background: radial-gradient(
circle at right bottom,
transparent 10px,
#ff6810 0
)
top right / 50% 60px no-repeat,
radial-gradient(circle at left bottom, transparent 10px, #ff6810 0) top
left / 50% 60px no-repeat,
radial-gradient(circle at right top, transparent 10px, #eeeeee 0) bottom
right / 50% 40px no-repeat,
radial-gradient(circle at left top, transparent 10px, #eeeeee 0) bottom
left / 50% 40px no-repeat;
filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
}
.circle03::after {
content: "";
width: 280px;
border: 1px dashed #fff;
position: absolute;
left: 0;
right: 0;
top: 60px;
margin: auto;
}
.circle04 {
width: 300px;
height: 100px;
position: relative;
background: #ff6810;
margin-top: 4px;
}
.circle04::after {
content: "";
position: absolute;
height: 2px;
width: 100%;
left: 0;
top: -2px;
background-image: linear-gradient(
to right,
#ff6810 2px,
transparent 2px,
transparent
),
radial-gradient(4px circle at 4px 0px, transparent 2px, #ff6810 2px);
background-size: 6px 2px;
}
.circle05 {
width: 300px;
height: 100px;
position: relative;
background: #ff6810;
}
.circle05::after {
content: "";
position: absolute;
height: 4px;
width: 100%;
left: 0;
bottom: -4px;
background-image: linear-gradient(
to right,
#ff6810 4px,
transparent 4px,
transparent
),
radial-gradient(8px circle at 8px 4px, transparent 4px, #ff6810 4px);
background-size: 12px 4px;
}
.circle06 {
width: 300px;
height: 100px;
position: relative;
background: #ff6810;
margin-left: 4px;
}
.circle06::after {
content: "";
position: absolute;
height: 100%;
width: 2px;
top: 0;
left: -2px;
background-image: linear-gradient(
to bottom,
#ff6810 2px,
transparent 2px,
transparent
),
radial-gradient(4px circle at 0px 4px, transparent 2px, #ff6810 2px);
background-size: 2px 6px;
}
.circle07 {
width: 300px;
height: 100px;
position: relative;
background: #ff6810;
margin-right: 12px;
}
.circle07::after {
content: "";
position: absolute;
height: 100%;
width: 6px;
top: 0;
right: -6px;
background-image: linear-gradient(
to bottom,
#ff6810 6px,
transparent 6px,
transparent
),
radial-gradient(12px circle at 6px 12px, transparent 6px, #ff6810 6px);
background-size: 6px 18px;
}
.circle08 {
width: 300px;
height: 100px;
position: relative;
background: radial-gradient(
circle at right top,
transparent 10px,
#ff6810 0
)
top left / 60px 51% no-repeat,
radial-gradient(circle at right bottom, transparent 10px, #ff6810 0)
bottom left / 60px 51% no-repeat,
radial-gradient(circle at left top, transparent 10px, #eeeeee 0) 60px 0/230px
51% no-repeat,
radial-gradient(circle at left bottom, transparent 10px, #eeeeee 0) 60px
50px /230px 51% no-repeat,
radial-gradient(circle at 10px 50px, transparent 10px, #eeeeee 0) 290px
0/10px 100px no-repeat;
filter: drop-shadow(2px 2px 2px rgb
【前端素材】模板-多种实用卡券相关.zip
版权申诉
25 浏览量
2024-04-04
18:35:44
上传
评论
收藏 14KB ZIP 举报
【前端素材】模板-多种实用卡券相关.zip （10个子文件） 
卡券相关 
index5.htm 3KB clip-卡券.htm 4KB
index2.html 18KB index6.htm 3KB index7.htm 4KB 卡券2.htm 2KB index.html 5KB index3.html 6KB index4.htm 3KB 折角卡片.htm 2KB资源评论
