【CSS】如何制作圆角矩形图片

制作圆角的关键在于设置img的border-radius属性。

先上效果图(此效果在最新FF和貌似老旧的Editplus3中都好用,没想到吧):

 代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圆角Img示例</title>

<style type="text/css">
     .myDiv{ 

   }

     .myDiv img{
        border-radius: 3em; 
     }

     .myDiv2{ 

   }

     .myDiv2 img{
        /*注意要做圆形图片须正方形底图,否则就会形成椭圆*/
        border-radius: 50%; 
     }
</style>
</head>
<body>
    <div class="myDiv">
        <img src="tribody.png" />
    </div>

    <div class="myDiv2">
        <img src="tribody.png" />
    </div>
</body>
</html>

参考资料:

http://www.divcss5.com/wenji/w732.shtml

https://www.html.cn/qa/css3/12655.html

END

posted @ 2021-12-19 10:34  逆火狂飙  阅读(226)  评论(0编辑  收藏  举报
生当作人杰 死亦为鬼雄 至今思项羽 不肯过江东