【问题标题】:css - circle with margin on bordercss - 边框上有边距的圆圈
【发布时间】:2020-03-25 20:44:13
【问题描述】:

我正在尝试创建一个带有边距轮廓的圆圈。
一切似乎都正常,除了我似乎无法在其中获得很少的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/

【问题讨论】:

标签: css


【解决方案1】:

我会说这样对待它:

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

你会得到:

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

【讨论】:

  • 外边框相当模糊。有没有办法让它更显眼?编辑:那里需要一个额外的零box-shadow: 0 0 0 3px #fff;
  • @adamj 将此添加到答案中
  • 对于高 dpi 屏幕,如果 1px 太薄而 2px 太厚,您可以使用 .5 来表示设备像素。例如。 0px 0px 0px 1.5px red - 我不确定“标准”分辨率屏幕是否会向上或向下舍入。
  • 这个盒子阴影救了我。谢谢!
【解决方案2】:

正如其他人所说,只有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>

【讨论】:

    【解决方案3】:

    尝试:

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

    在这个小提琴上也可以看到使用 margin 和 padding CSS 属性的区别。

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

    【讨论】:

    • 我没有看到背景和笔触之间的差距,就像我帖子中的图片一样
    【解决方案4】:

    您可以将outlineoutline-radius 结合使用。 检查这个jsFiddle

    【讨论】:

    • 只有firefox支持轮廓半径。
    猜你喜欢
    • 2016-01-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-12-16
    • 2020-11-12
    • 1970-01-01
    • 2013-04-06
    • 2015-04-04
    相关资源
    最近更新 更多