CSS3 Radial Gradients-径向渐变实现内凹

CSS3 主要定义了两种类型的渐变（gradients）：

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
• 径向渐变（Radial Gradients）- 由它们的中心定义

本文章内容参考来源：优惠券内凹圆效果

本文需要实现效果如下图：

css代码：

​
.box1{
		height: 3.125rem;
		line-height: 3.125rem;
		margin: 1.25rem;
		background:radial-gradient(circle at 0px 25px, transparent 35px, orange 6px) top left;
	}
	.box1 img{
		border-radius: 1.5625rem;
		margin-right: 1.25rem;
	}	

​

html代码：

 <div class="box1">
		<img src="img/4675244_50.jpg" />
 </div>