css - 有没有办法使用 裁剪图像，使其具有圆 Angular ？

Question

我认为使用带 CSS 圆 Angular 的 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;