有没有办法使用<div>剪辑图像，使其具有圆角？</div>

Question

我认为使用具有CSS圆角的div来剪切图像会使页面加载速度比使用Photoshop中剪切的图像更快，然后以透明度导出为PNG-32。

Answer 1

确保使其与浏览器兼容：

img {
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}

border-radius属性的简写是：

border-radius: top-left top-right bottom-right bottom-left;

因此，10px 30px 10px 30px的值会在右上角和左下角围绕其他两个角落更多：

-moz-border-radius-topleft:10px;
-moz-border-radius-topright:30px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-bottomleft:30px;
-webkit-border-radius:10px 30px 10px 30px;
border-radius:10px 30px 10px 30px;

Answer 2

使用CSS3 border-radius媒体资源：

img { border-radius:5px; /* specify an appropriate pixel value */ }