background-clip

要实现这个样式，一般会使用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;