html 圆型围绕效果,css – 围绕圆形图像分割的圆形边框

DEMO

说明

创建边框

>使用border-radius的边框创建边框。

step 1

>然后转换旋转使左上角边框出现在正确的位置.0Step 2(不要忘了“旋转”图像，以另一种方式旋转，使其保持垂直)

白色的空间

>使用伪元素创建图像底部和右侧的白色间距。 step 3

除非您对浏览器支持有非常特殊的要求，否则可以删除border-radius属性的供应商前缀。查看canIuse了解更多信息。

CSS：

.avatar{

border: solid 4px #54BE69;

border-left-color:#D5EDDA;

padding:2px;

display:inline-block;

border-radius: 50%;

position:relative;

transform:rotate(45deg);

-ms-transform:rotate(45deg);

-webkit-transform:rotate(45deg);

}

.avatar img{

display:block;

border-radius: 50%;

transform:rotate(-45deg);

-ms-transform:rotate(-45deg);

-webkit-transform:rotate(-45deg);

}

.avatar:before,.avatar:after{

content:'';

position:absolute;

background:#fff;

z-index:-1;

transform:rotate(-45deg);

-ms-transform:rotate(-45deg);

-webkit-transform:rotate(-45deg);

}

.avatar:before{

height:4px;

top:50%;

left:2px; right:-5px;

margin-top:-2px;

}

.avatar:after{

width:4px;

left:50%;

top:2px; bottom:-5px;

margin-left:-2px;

}