CSS - 在边框上留有边距的圆形

Question

CSS - 在边框上留有边距的圆形

15

我正在尝试创建一个带有外边框的圆形。
一切似乎都正常，除了我无法在那里加入几个px的边距。
请问有什么建议吗？

enter image description here

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

- t q

你的方法不对；那不是一个margin，那是一个border。 - zzzzBov

4个回答

2

正如其他人所说，只有火狐浏览器支持这个功能。这里提供一个解决办法，它可以实现相同的效果，并且甚至可以与虚线轮廓一起使用。

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

- RobKohr

1

请尝试使用：

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

请参考此Fiddle，了解使用margin和padding CSS属性时的区别。

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

- user1386320

我在帖子中的图片上看不到背景和描边之间的间隙。 - t q

0

您可以将outline与outline-radius结合使用。请参阅jsFiddle。

- Simone

3

只有 Firefox 支持轮廓半径。 - zzzzBov

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zzzzBov · Accepted Answer

我的建议是这样处理：

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

所有部分合在一起：

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

通过在 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>

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

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