css – 围绕圆形图像分割的圆形边框

我想知道如何使用CSS创建以下效果：

所需输出：

目前，我可以想到的是在图像周围添加边框。但是，如何切割它们，并在图像周围形成部分？

这是我目前的CSS：

.avatar img {
    border-radius: 50%;
    border: solid 3px #65C178;
    border-width: 4px;
}

和HTML：

<div class="avatar"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/soffes/128.jpg" /></div>

预览：JSFiddle Example

这只会在化身图像周围提供边框，而不是具有白色间距的绿色部分。

解决方法

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;
}

css – 围绕圆形图像分割的圆形边框

解决方法

猜你在找的CSS相关文章