Question

我在哪里可以生成这种类型的css来制作一个右下角???

 -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
    }

这几乎可行但我需要更圆角

这是我到目前为止的代码：

.container {
    width: 960px;
    height: 700px;
    background:#FFF;
    position:absolute;
    top: 0px;
    left: 50%;
    overflow:hidden;
    margin: 70px 0px 0px -480px;
    border: 0px solid #900;
    border-right: 15px solid #900;
    border-bottom: 15px solid #900;
    -webkit-border-radius-bottom-right: 100px;
    -moz-border-radius-bottomright: 100px;
    border-bottom-right-radius: 100px;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
    z-index: 55;
}

.slideshow {
    position:relative;
    width: 960px;
    height: 700px;
    top: -1600px;
    left: 0px;
    z-index: 51;
}

除Chrome以外的所有功能都很棒

Answer 1

Chrome有一个Webkit错误......

CSS边框半径不在Webkit上修剪图像

错误报告......

BUG WEBKIT

这意味着如果你的绝对位置有一个边界半径和溢出隐藏的div，那么图像或里面的内容就不会受到溢出的影响。解决方案可以是将图像插入主div的背景图像中，并且可以正常工作。

如何使用webkit-mask-image使CSS3圆角隐藏在Chrome / Opera中？

1 个答案: