0

このタイプの 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以外のすべてでうまく機能します

4

1 に答える 1

0

ChromeにはWebkitのバグがあります...

WebkitでCSS Border Radiusが画像をトリミングしない

バグ報告...

バグウェブキット

つまり、絶対位置に div があり、境界線の半径とオーバーフローが非表示になっている場合、画像または内部のコンテンツはオーバーフローを尊重しません。解決策は、メインの div の背景画像に画像を挿入することであり、それは機能します。

于 2012-11-14T09:17:23.883 に答える