css3边框圆环怎么实现 |css和html转换

.border {
border: 2px solid #ccc;
border-radius: 50%;
width: 200px;
height: 200px;
}
.border:before {
content: "";
display: block;
margin: auto;
width: 50%;
height: 50%;
background-color: #f7f7f7;
border-radius: 50%;
border: 2px solid #ccc;
}

以上代码的效果是一个灰色的圆形边框，鼠标悬停在边框上则出现一个白色的圆形边框。

首先，大家创建一个div元素作为容器，定义一个宽高相等的正方形。然后，大家使用border-radius属性将边框设置为50%，这样就得到了一个圆形边框。

接下来，大家使用:before伪元素来创建一个大小相同的圆形。为了使它位于正方形的正中央，大家将左右边距及上下边距都设置为auto，然后设置背景颜色和边框颜色，就得到了一个白色的圆形。

最后，大家使用:hover伪类来定义鼠标悬停时边框的样式，将颜色设置为白色，就得到了一个非常简单而美观的边框圆环效果。