37

css3でインセットボーダー半径を作成する方法はありますか? (画像なし)

次のような境界半径が必要です。

はめ込み枠の半径

4

8 に答える 8

36

すべての 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明らかに、これはおよびのサポートに依存するため、プログレッシブ エンハンスメントとして扱う必要があります。または、設計に不可欠な場合は、古いブラウザー (特に、 IE9 までgradientサポートしていない IE) 用の画像ベースのフォールバックを提供する必要があります。gradient）。

于 2013-01-21T13:07:44.460 に答える
11

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

私の例をチェックしてください。

これは、開始するために必要な基本的な 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>

于 2014-03-17T17:39:39.457 に答える
7

コーナーを透明にする必要があるとは思えませんが、背景がわかっている場合は、各コーナーに丸い境界線で 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>

于 2012-06-14T13:19:04.467 に答える
2

この効果は、新しいcss3-Border-imagesを使用して実現できます（まあ、それは画像ですが、問題なく拡大縮小されます）。しかし、これは非常に新しく、まだあまり広くサポートされていません（正確には、IEを除くすべての適切なブラウザー（プレフィックス付き）で十分です;））。

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

ブラウザのサポート

于 2012-06-14T13:23:32.033 に答える
2 

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>

例はこちら

于 2013-11-18T07:24:08.140 に答える
2

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

編集：

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

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

于 2012-06-14T13:05:49.860 に答える
0

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

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

于 2012-07-14T12:45:06.440 に答える
0 

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>

于 2018-01-10T17:24:45.620 に答える