html - CSS3：为图像添加圆角

Question

我一直在尝试为框架添加圆角，但它仅适用于 mozilla 而不适用于 chrome 或 IE。

我没有将border-radius属性添加到图像标签，而是添加到画布标签

canvas {border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;}

任何人都可以提出一些建议吗？

该网站是n1bar.com

Answer 1

确保为所有浏览器设置半径，如下所示：

canvas {
    -moz-border-bottom-right-radius: 50px; /* Firefox */
    -webkit-border-bottom-right-radius: 50px; /* Safari, Chrome */
    border-bottom-right-radius: 50px; /* CSS3 */

    -moz-border-bottom-left-radius: 50px; /* Firefox */
    -webkit-border-bottom-left-radius: 50px; /* Safari, Chrome */
    border-bottom-left-radius: 50px; /* CSS3 */
}

Answer 2

更清洁的版本：

-moz-border-radius: 0 0 50px 50px;
-webkit-border-radius: 0 0 50px 50px;
border-radius: 0 0 50px 50px;

本质上，顺序是“左上、右上、右下、左下”。