css怎么设置图片圆角

• css设置图片圆角的方法：首先打开相应的代码文件；然后通过在<style>标签内添加代码如“-moz-border-radius:10px;-webkit-border-radius:10px;”来设置图片圆角即可。
•  
• 本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。
•  
• CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。

代码实例：

border-radius: 15px;

     把下列代码添加进入你的<style>标签内

img {
  border-radius: 10px; /* 统一设置四个角的圆角半径 */
}

进阶用法

1. ​单独设置每个角​：

img {
  border-radius: 10px 20px 30px 40px; /* 顺序：左上 右上 右下 左下 */
}

       2.椭圆形圆角​（将图片变为圆形）：

img {
  border-radius: 50%; /* 宽度和高度的50% */
  /* 确保图片是正方形，否则会变成椭圆 */
  width: 200px;
  height: 200px;
  object-fit: cover; /* 保持比例裁剪 */
}

示例代码

<style>
  .rounded-img {
    border-radius: 15px;
    width: 300px;
  }

  .circle-img {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    object-fit: cover;
  }
</style>

<img class="rounded-img" src="your-image.jpg" alt="圆角图片">
<img class="circle-img" src="your-image.jpg" alt="圆形图片">

    清空缓存，看看效果吧（部分IE版本可能不支持）

×

如果觉得文章对您有用，请随意打赏。
您的支持是我们继续创作的动力！

微信扫一扫

支付宝扫一扫