css技巧分享（优惠券缺角样式实现）

主要知识点：radial-gradient

radial-gradient() CSS 函数创建一个图像，该图像由从原点辐射的两种或多种颜色之间的渐进过渡组成。它的形状可以是圆形或椭圆形。函数的结果是  数据类型的对象。这是一种特别的 。

.coupon{
    width: 190rpx;
	height: 194rpx;
	background-color: #bbb;
	border-radius: 14rpx;
	color: #fff;
	margin-right: 20rpx;
	display: inline-block;
	-webkit-mask: radial-gradient(circle at 10rpx 134rpx, transparent 10rpx, red 0) -10rpx;
	background-color: #d6b16c;
}

Copy

.coupon {
		width: 284rpx;
		height: 140rpx;
		background-color: #bbb;
		border-radius: 8rpx;
		color: #fff;
		position: relative;
		display: inline-block;
		position: relative;
		background-image: 
			radial-gradient(circle at 220rpx top, #fff, #fff 10rpx, transparent 11rpx),
			radial-gradient(circle at 220rpx bottom, #fff, #fff 10rpx, transparent 11rpx);
}