<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>
缩写
.coupon4 {-webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px;
}
五、六角收缩效果
<style type="text/css">
.coupon5 {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;-webkit-mask-size: 50%;
}
</style>
<div class="coupon5"></div>
缩写
.coupon5 {-webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;
}
官网下载:www.mysql.com
MySQL :: Download MySQL Community Server (Archived Versions)
1.MySQL下载流程:
第一步:点击download, 下滑找到MySQL community(gpl)Downloads>> 第二步:点…