要实现这个样式,一般会使用2个div重叠实现,现在background-clip使用一个div就实现。
background-clip:
border-box|padding-box|content-box;
代码
<style>
.box{
100px;
height: 100px;
border-radius: 50%;
background: grey;
border: 3px solid goldenrod;
border-left-color: transparent;
border-right-color: transparent;
padding: 10px;
background-clip: content-box;
}
</style>
<body>
<div class="box"></div>
</body>
background-clip: padding-box;
background-clip: border-box;