css 怎么把图片设置圆角

### CSS 实现图片圆角效果

为了使图片具有圆角效果，`border-radius` 属性是一个非常有效的工具。该属性允许开发者通过指定像素值来创建带有圆角的矩形边界[^1]。

对于一张普通的 `<img>` 标签内的图片应用圆角样式，只需简单地向其添加 `border-radius` 属性即可：

/* 设置所有四个角落均为圆形 */
img {
    border-radius: 10px;
}

当希望仅对特定的一两个角进行处理时，则可分别设定各个角的具体数值：

/* 左上右上左下右下的顺序依次设置不同的圆角度数 */
img {
    border-top-left-radius: 15px;     /* 左上角 */
    border-top-right-radius: 5px;      /* 右上角 */
    border-bottom-left-radius: 20px;   /* 左下角 */
    border-bottom-right-radius: 8px;   /* 右下角 */
}

值得注意的是，在某些情况下可能还需要考虑浏览器兼容性问题。尽管现代主流浏览器均支持 `border-radius` 属性，但在较旧版本中可能会遇到显示不一致的情况。因此建议始终测试目标平台上的表现并适当调整代码以确保最佳视觉体验[^2]。

另外，如果想要让整个元素变成完全圆形而不是椭圆形状的话，可以将宽高设为相等，并给定较大的 `border-radius` 值直到达到所需的效果为止；或者更简便的做法就是直接把 `border-radius` 设为 50%:

.circular-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}