css - css-境界線にマージンのある円

Question

輪郭に余裕のある円を作ろうとしています。私がそこにそのわずかなマージン
を得ることができないように見えることを除いて、すべてがうまくいくようです。 何か提案はありますか？px

.ui-corner-all { -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; border: 1px solid black; margin:5px; width:30px; height:30px;}

ここに私のフィドルがあります：http：//jsfiddle.net/nalagg/K6pdr/

Answer 1

私はそれをこのように扱うと言います：

外側の「境界線」-ボックスシャドウ
を使用 内側の「マージン」-白い境界線を
使用内側の領域-背景色を使用

すべて一緒にあなたは得る：

.circle {
  background-color: #F80;
  border: 3px solid #FFF;
  border-radius: 18px;
  box-shadow: 0 0 2px #888;
  height: 30px;
  width: 30px;
}

<div class="circle"></div>

---

ボックスシャドウのblur-radiusを0に設定すると、外側の境界線をより明確にすることができます。

.circle {
  background-color: #F80;
  border: 3px solid #FFF;
  border-radius: 18px;

  /* offset-x | offset-y | blur-radius | spread-radius | color */
  box-shadow: 0 0 0 2px #888;
  height: 30px;
  width: 30px;
}

<div class="circle"></div>

---

別の方法として、2番目の要素を使用できます。

.circle {
  border: 1px solid #CCC;
  border-radius: 19px;
  display: inline-block;
}

.inner {
  background-color: #F80;
  border-radius: 15px;
  margin: 3px;
  height: 30px;
  width: 30px;
}

<div class="circle">
  <div class="inner"></div>
</div>

Answer 2

試してみてください：

.ui-corner-all { -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; border: 1px solid black; margin: 2px; background: #fcc; width: 30px; height: 30px; }

または内側のパディングを使用:

.ui-corner-all2 { -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; border: 1px solid black; padding: 2px; background: #fcc;  width: 30px; height: 30px; }

マージンとパディングの CSS プロパティを使用する場合のこのフィドルの違いも参照してください。

http://jsfiddle.net/MQx7r/4/

Answer 3

outlineと組み合わせて使用​​できますoutline-radius。このjsFiddleを確認してください。