css image round

📌 相关文章

📜 css image round - CSS (1)

📅 最后修改于: 2023-12-03 15:00:05.296000 🧑 作者: Mango

CSS Image round 是一种非常流行的技术，可以将图片变成圆形或者圆角矩形，这种技术在网站设计中非常常见，特别是在头像、图标等地方。

圆形图片

要创建圆形图片，可以使用 border-radius 属性。如果将它设置为 50%，则图像将变为圆形。

.img-circle {
  border-radius: 50%;
}

可以将此类应用于图像，使用 class 或 id 来选择相应的图像。

<img class="img-circle" src="your-image-url" alt="your-image">

圆角矩形图片

CSS Image round 也可以用于创建圆角矩形图片。

.img-round {
  border-radius: 8px;
}

这将创建具有 8px 圆角的矩形。

完整的例子

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Image Round Demo</title>
    <style>
      /* 圆形图片 */
      .img-circle {
        border-radius: 50%;
      }

      /* 圆角矩形图片 */
      .img-round {
        border-radius: 8px;
      }
    </style>
  </head>
  <body>
    <h1>Demo</h1>
    <img class="img-circle" src="https://via.placeholder.com/150" alt="Circle Image">
    <img class="img-round" src="https://via.placeholder.com/150" alt="Rounded Image">
  </body>
</html>

结论

CSS Image round 是一个非常有用的技术，可以用于创建圆形以及圆角矩形图片。在网站设计中，这种技术非常有用。