css - CSS: ボックスの角を内側に丸める方法は?

Question

border-radius箱の角を丸くする性質があります。しかし、円を減算するように、ブロック内の角を丸くするにはどうすればよいでしょうか?

ここのように: http://malsup.com/jquery/corner/

カール設定

Answer 1

これは、通常の背景画像の上に 4 つの円形の「グラデーション」背景画像を追加し、それぞれを適切なコーナーに配置することで実行できます。Lea Verou のブログに例があります。そこからJSFiddleを抽出しました。キーコードは

.round {
    background:
        radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px);

    background-position: bottom left, bottom right, top right, top left;
    background-size: 50% 50%;
    background-repeat: no-repeat;

    padding: 14px;
}

Answer 2

純粋な CSS でそれを行う方法が 1 つあります。

CSS コード:

div {
height: 200px;
background: red;
position: relative;
width:200px;
}

div:after {
content: '';
position: absolute;
top: -20px; right: -20px;
border-top: 50px solid white;
border-left: 50px solid white;
width: 0;
background:#fff;
    border-radius:100px;

}
div:before {
content: '';
position: absolute;
top: -20px; left: -20px;
border-top: 50px solid white;
border-left: 50px solid white;
width: 0;
background:#fff;
    border-radius:100px;

}

HTML: <div></div>

次に例を示します。

Answer 3

いいえ、私が知る限り、純粋な CSS でそれを行う方法はありません。JavaScript や jQuery でそれを行うのは簡単ではありません。

私の知る限り、あなたがリンクした jQuery プラグインはあなたにとって最適なプラグインです。特に、高度な CSS3 がまだ存在しないクロスブラウザー ソリューションが必要なため、使用する必要があります。