background-clip

要实现这个样式，一般会使用2个div重叠实现，现在background-clip使用一个div就实现。

 

background-clip: 

border-box|padding-box|content-box;

代码

<style>
.box{
    width: 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;

 

 

posted on 2019-09-19 13:59  chenyi4  阅读(142)  评论(0)  编辑  收藏  举报

导航