CSS 圆形边框

在网站设计中，圆形边框是非常常见的元素之一。使用 CSS 可以非常方便地为元素添加圆形边框。本文将介绍如何使用 CSS 实现圆形边框效果。

1. 圆形边框样式

要创建圆形边框，需要设置元素的边框样式。下面是一个基本的圆形边框样式：

border: 2px solid #000;
border-radius: 50%;

这里我们设置了 2px 的实线黑色边框，并将元素的 border-radius 设置为 50%，这样就可以创建一个圆形的边框了。

2. 圆形背景

如果需要为圆形边框设置背景，可以使用 ::before 和 ::after 伪元素。假设我们要创建一个带有蓝色背景的白色圆形边框，可以这样写：

.circle {
    position: relative;
    width: 100px;
    height: 100px;
    border: 2px solid #fff;
    border-radius: 50%;
}
.circle::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: 100%;
    height: 100%;
    background-color: #00f;
    border-radius: 50%;
    z-index: -1;
}

这里我们设置了一个白色实线边框和圆角，然后使用 ::before 伪元素创建一个蓝色背景。

3. 圆形图片

有时候需要将图片设置为圆形边框，也可以很容易地实现。下面是一个基本的圆形图片样式：

img {
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
}

这里我们将图片的 border-radius 设置为 50%，然后使用 overflow: hidden 隐藏图片超出边框的部分，最后使用 object-fit: cover 让图片充满边框。

总结

使用 CSS 可以很容易地为元素添加圆形边框，还可以实现带有背景和图片的圆形边框效果。下面是上述样式的完整代码片段：

/* 基本圆形边框 */
.border {
    border: 2px solid #000;
    border-radius: 50%;
}

/* 圆形边框带背景 */
.circle {
    position: relative;
    width: 100px;
    height: 100px;
    border: 2px solid #fff;
    border-radius: 50%;
}
.circle::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: 100%;
    height: 100%;
    background-color: #00f;
    border-radius: 50%;
    z-index: -1;
}

/* 圆形图片 */
img {
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
}