css - 边框上有边距的圆圈

css - circle with margin on border

提问by t q

I am trying to create a circle with an outline that has margin.
Everything seems to work except i cant seem to get that few pxof margin in there.
Any suggestions please?

我正在尝试创建一个带有边距的轮廓的圆。
一切似乎都在工作，除了我似乎无法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;}

heres my fiddle: http://jsfiddle.net/nalagg/K6pdr/

继承人我的小提琴：http: //jsfiddle.net/nalagg/K6pdr/

回答by zzzzBov

I'd say to treat it like this:

我会说这样对待它：

Outer "border" - use a box shadow
Inner "margin" - use a white border
Inner area - use background color

外部“边框” - 使用框阴影
内部“边距” - 使用白色边框
内部区域 - 使用背景颜色

All together you get:

总之你得到：

.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>

---

---

You can make the outer border more distinct by setting blur-radius to 0 on box-shadow.

您可以通过将 box-shadow 上的 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>

---

---

As an alternative, you could use a second element:

作为替代方案，您可以使用第二个元素：

.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>

回答by RobKohr

As others have said, only firefox supports this. Here is a work around that does the same thing, and even works with dashed outlines.

正如其他人所说，只有 Firefox 支持这一点。这是一个做同样事情的解决方法，甚至可以使用虚线轮廓。

.has-outline {
    background: #51ab9f;
    border-radius: 50%;
    padding: 5px;
    position: relative;
    width:200px;
    height:200px;
}
.has-outline:after {
  border-radius: 50%;
  padding: 5px;
  border: 2px dashed #9dd5cf;
  position: absolute;
  content: '';
  top: -6px;
  left: -6px;
  bottom: -6px;
  right: -6px;
}

<div class="has-outline">
</div>

回答by RobKohr

Try with:

尝试：

.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; }

Or with inner padding:

或使用内部填充：

.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; }

See also on this fiddle the difference when using margin vs padding CSS properties.

另请参阅此小提琴上使用边距与填充 CSS 属性时的区别。

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

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

回答by Simone

You can use outlinein combination with outline-radius. Check this jsFiddle.

您可以outline与outline-radius. 检查这个jsFiddle。