CSS3：为图像添加圆角

Question

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

我不是将border-radius属性添加到图像标记，而是添加到canvas标记

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;

基本上，订单是“左上角，右上角，右下角，左下角”。