1

半径のあるボックスがあります-それに境界線を適用したいのですが、「内側の」ボックスが正方形のエッジに戻った場合、これは可能ですか？

CSS

.box {
width:100px;
height:50px;
background:red;
border-radius:6px;
margin:20px;
}

.box2 {
width:100px;
height:50px;
background:red;
border-radius:6px;
margin:20px;
border:5px solid #ccc;
}

HTML

<div class="box"></div>
<div class="box2"></div>

ご覧のとおり、2番目のボックスには境界線がありますが、内側の半径も保持したいと思います。

ここでフィドル：CSSボーダーフィドル

4

3 に答える 3

2

境界線が太すぎて、その内側の半径を視覚的に丸めることができません。border-radius内側の角を丸くしたい場合は、2番目のボックスを増やす必要があります。

border-radius最初のボックスを取得して2番目のボックスを追加することにより、2番目のボックスの角を最初のボックスと同じにすることができますborder-width。6pxしたがって、 （最初のボックスからの）内側の半径がborder-width: 5px、の場合border-radius: 11px、2番目のボックスにあります。

更新されたフィドル

于 2013-01-02T17:46:11.533 に答える
0

ボックスシャドウを使用して、目的の効果を得ることができます。

box-shadow:0 0 0 5px #ccc;

このjsFiddleを参照してください

于 2013-01-02T17:49:05.737 に答える
0

このようにして、完全に丸みを帯びた境界線の効果を得ることができます。

CSS：

.box {
    width:100px;
    height:50px;
    background:red;
    border-radius:6px;
    margin:20px;
}

.box2 {
    width:100px;
    height:50px;
    background:#ccc;
    border-radius:6px;
    margin:20px;
    border:5px solid #ccc;
}

.boxinbox {
    background:red;
    border-radius:6px;
    width:100%;
    height:100%;
    }

HTML：

  <div class="box"></div>
  <div class="box2">
    <div class="boxinbox"></div>
  </div>
于 2013-01-02T17:51:01.153 に答える