使用border-radius和border可轻松实现图片圆角和边框效果。1. border-radius设圆角，如10px或50%圆形；2. border属性添加边框，如3px solid #000；3. 结合使用并配合object-fit可创建美观的图片卡片。
在CSS初学者项目中，给图片添加圆角和边框是非常常见且实用的效果。它不仅能提升页面的美观度，还能让图片更自然地融入整体设计。下面介绍如何通过简单的CSS实现这两个效果。
1. 实现图片圆角（border-radius）
使用 border-radius 属性可以让图片的四个角变得圆润。你可以设置具体的像素值或使用百分比来实现圆形图片。
常用写法：- border-radius: 10px; —— 轻微圆角
- border-radius: 50%; —— 完全圆形（适合正方形图片）
示例代码：
img {
border-radius: 15px;
}
如果想让头像类图片变成圆形，确保图片是正方形，并设置：
立即学习“前端免费学习笔记（深入）”；
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
}
2. 给图片添加边框（border）
使用 border 属性可以为图片加上边框。你可以自定义边框的宽度、样式和颜色。
基本语法：
img {
border: 3px solid #000;
}
- 3px 是边框宽度
- solid 是实线边框（也可以用 dashed、dotted 等）
- #000 是边框颜色（黑色）
结合圆角使用效果更佳：
.rounded-border {
border: 4px solid #ff6b6b;
border-radius: 20px;
}
3. 综合示例：带圆角边框的图片卡片
将两个属性结合，创建一个美观的图片展示效果：
.card img {
width: 200px;
height: 200px;
object-fit: cover; /* 保证图片不变形 */
border: 3px solid #ddd;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* 可选：加点阴影 */
}
HTML 结构示例：
@@##@@
基本上就这些。掌握 border-radius 和 border 就能轻松实现常见的图片样式效果，适合轮播图、头像、作品集等场景。不复杂但容易忽略细节，比如图片比例和 object-fit 的配合使用。
