【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:35  不朽的飞翔  阅读(362)  评论(0)    收藏  举报