css实现卡券效果
<div class="coupon"></div>
.coupon{
width: 300px;
height: 100px;
position: relative;
background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat,
radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px no-repeat,
radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px no-repeat,
radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px no-repeat;
filter: drop-shadow(2px 2px 2px rgba(0,0,0,.2));
}
效果展示:
模糊文字
<h3 class="fuzzy">模糊文字</h3>
.fuzzy {
color: transparent;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
效果展示: