web-dev-qa-db-ja.com

CSS3でボーダー半径を挿入

Css3でインセットボーダー半径を作成する方法はありますか？ （画像なし）

このような境界線の半径が必要です：

Inset border radius

csscss3css-shapes
31
Serhiy

すべてのCSSおよびHTML（画像などを使用しない）でこれを達成するために見つけた最良の方法は、Lea Verouによる CSS3グラデーションを使用 によるものです。彼女のソリューションから：

div.round {
    background:
        -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
         -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
         -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background-position: bottom left, bottom right, top right, top left;
        -moz-background-size: 50% 50%;
        -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

最終結果は、曲線を含む透明なグラデーションのセットです。完全な JSFiddle を参照し、デモを見て、見た目を試してみてください。

明らかにこれはrgbaとgradientのサポートに依存するため、プログレッシブエンハンスメントとして扱う必要があります。または、デザインに不可欠な場合は、古いブラウザーに画像ベースのフォールバックを提供する必要があります（特にIEでは、gradientをIE9までサポートしていません）。

31
Chris Krycho

これは、ボックスの影のある隅に透明な円要素を絶対的に配置することで実現できます。スパン、ボックスシャドウ、境界線、および擬似セレクターを含む、オーバーフローした非表示のdivの組み合わせを使用しました。

example をチェックしてください。

これは、始めるために必要な基本的なHTMLおよびCSSです。

a {display:inline-block; width:250px; height:100px; background:#ccc; border:2px solid #000; position:relative; margin:10px;}

a div {position: absolute; top: 0; overflow: hidden; width: 15px; height: 100%;}
a div:after {content:''; background:#000; width:2px; height:75px; position:absolute; top:12.5px;}

a div:first-of-type {left: -14px;}
a div:first-of-type:after {left:0;}

a div:last-of-type {right: -14px;}
a div:last-of-type:after {right:0;}

a span {display:block; width:30px; height:30px; background:transparent; position:absolute; bottom:-20px; right:-20px; border:2px solid #000; border-radius:25px; box-shadow:0 0 0 60px #ccc;}

a div:first-of-type span {left:-20px;}
a div:first-of-type span:first-child {top:-20px;}
a div:first-of-type span:last-child {bottom:-20px;}

a div:last-of-type span {right:-20px;}
a div:last-of-type span:first-child {top:-20px;}
a div:last-of-type span:last-child {bottom:-20px;}
<a href="">
    <div>
        <span></span>
        <span></span>
    </div>

    <div>
        <span></span>
        <span></span>
    </div>
</a>
11
Brett Hayes

角を透明にする必要があるとは考えられませんが、背景がわかっている場合は、角の丸い各角にdivを作成できます。これらのdivにページの背景と同じ背景色が与えられている場合、効果は機能します。

ここに私の例を参照してください http://jsfiddle.net/TdDtX/

#box {
    position: relative;
    margin: 30px;
    width: 200px;
    height: 100px;
    background: #ccc;
    border: 1px solid #333;
}

.corner {
    position: absolute;
    height: 10px;
    width: 10px;
    border: 1px solid #333;
    background-color: #fff;
}

.top-left {
    top: -1px;
    left: -1px;
    border-radius: 0 0 100% 0;
    border-width: 0 1px 1px 0;
}

.top-right {
    top: -1px;
    left: 190px;
    border-radius: 0 0 0 100%;
    border-width: 0 0 1px 1px;
}

.bottom-left {
    top: 90px;
    left: -1px;
    border-radius: 0 100% 0 0;
    border-width: 1px 1px 0 0;
}

.bottom-right {
    top: 90px;
    left: 190px;
    border-radius: 100% 0 0 0;
    border-width: 1px 0 0 1px;
}
<div id="box">
    <div class="corner top-left"></div>
    <div class="corner top-right"></div>
    <div class="corner bottom-left"></div>
    <div class="corner bottom-right"></div>
</div>
5
John Lawrence

それは可能だとは思えません。何が起こるかを確認するためだけに負の値の境界半径を試しましたが、効果はありませんでした。

編集：

ボックスを小さなパーツに分割しても、ある時点で透明なインセットコーナーを作成する必要があります。透明度は、画像なしではこれが不可能になる可能性があるトリッキーな部分です。基本的に、非透明な周囲のbgで透明な円をレンダリングできる必要があります（CSSで可能であれば、方法を知りたいです:)

透明性を必要としない場合、それを行う方法があります。

2
Matt Coughlin

新しいcss3-Border-imagesでこの効果を達成できます（まあ、それは画像ですが、問題なくスケーリングします）。しかし、これは非常に新しく、まだあまり広くサポートされていません（IE正確には;を除く）すべてのまともなブラウザー（プレフィックス付き）で）。

csstricks の境界線画像に関する素晴らしい記事。

ブラウザサポート

2
Christoph
body {
    background: #fff;
}

.div{
 position:relative;
}
.box {
background: #f7f7f7;
height: 178px;
width: 409px;
margin: 25px;
/*padding: 20px;*/
position: relative;
overflow: hidden;
border: 1px solid #ccc;
border-left: 0px;
}
.box:before {
content: "";
display: block;
background: #fff;
position: absolute;
top: -33px;
left: -263px;
width: 300px;
height: 242px;
border-radius: 300px;
border: 1px solid #ccc;
}
<div class="div">
<div class="box"></div>
</div>

</body>
</html>

例： http://jsfiddle.net/dVmX3/

1
Davinder Singh
body {
    background: #fff;
}

.div{
 position:relative;
}
.box {
background: #f7f7f7;
height: 178px;
width: 409px;
margin: 25px;
/*padding: 20px;*/
position: relative;
overflow: hidden;
border: 1px solid #ccc;
border-left: 0px;
}
.box:before {
content: "";
display: block;
background: #fff;
position: absolute;
top: -33px;
left: -263px;
width: 300px;
height: 242px;
border-radius: 300px;
border: 1px solid #ccc;
}
<div class="div">
<div class="box"></div>
</div>

</body>
</html>
0
user8696825

うーん、ここでこの小さなトリックを使用して Inset Border Radius を作成できます。

次に、透明性をサポートするには、おそらく他のブロックを間に追加する必要があります。多かれ少なかれ、古い丸い画像が行われていた方法に似ています。透明な画像のあるすべての角にスパンがあります。そして、空のスペースを埋めるために、側面と上部にまたがります。画像を使用する代わりに、このトリックを使用してCSSで実行できます。

0
Jon Mifsud