css初学者项目中实现图片圆角和边框-css教程-PHP中文网

css初学者项目中实现图片圆角和边框

P粉602998670

发布： 2025-09-25 08:33:01

原创

948人浏览过

使用border-radius和border可轻松实现图片圆角和边框效果。1. border-radius设圆角，如10px或50%圆形；2. border属性添加边框，如3px solid #000；3. 结合使用并配合object-fit可创建美观的图片卡片。

css初学者项目中实现图片圆角和边框

在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 属性可以为图片加上边框。你可以自定义边框的宽度、样式和颜色。

改图鸭AI图片生成

查看详情

基本语法：

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 结构示例：

<img src="photo.jpg" alt="个人照片" class="card-img">

登录后复制

基本上就这些。掌握 border-radius 和 border 就能轻松实现常见的图片样式效果，适合轮播图、头像、作品集等场景。不复杂但容易忽略细节，比如图片比例和 object-fit 的配合使用。

以上就是css初学者项目中实现图片圆角和边框的详细内容，更多请关注php中文网其它相关文章！