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

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

先上效果图（此效果在最新FF和貌似老旧的Editplus3中都好用，没想到吧）：

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

代码：

<!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