轮廓打破边界半径答案

【问题标题】：outline breaks border-radius轮廓打破边界半径
【发布时间】：2012-09-04 03:19:08
【问题描述】：

我试图在谷歌上四处寻找答案，但不幸的是没有任何运气。由于某种原因，以下 CSS 不显示边框半径：

      .mainContent
      {
          margin-right: auto;
          margin-left: auto;

          background: white;
          outline-color: black;
          outline-width: thin;
          outline-style: solid;
          border-radius: 5px;
          height: 100px;
          width: 500px;
     }

如果我删除大纲块，它工作得很好。有了轮廓，我只有带有轮廓但没有圆角的 DIV。我正在 Chrome (webkit) 中对此进行测试。任何帮助将不胜感激！

【问题讨论】：

轮廓不应遵循边界中的任何曲率。
也就是说，我已经使用了border属性了？

标签： css google-chrome

【解决方案1】：

border-radius 适用于 border，而不是轮廓！

这意味着您需要使用边框。轮廓并不是真正用于装饰，更多的是用于:focus 状态和类似的东西。

如果添加边框时宽度会增加让您感到困扰，请使用：

* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

让事情变得更有意义。 oldIE 有一个 polyfill 可以让它在那里工作。

（阅读http://paulirish.com/2012/box-sizing-border-box-ftw/了解更多信息）

【讨论】：

【解决方案2】：

为什么不使用

.mainContent
{
     margin: 0 auto;
     background: white;
     border: 1px solid #000;
     border-radius: 5px;
     height: 100px;
     width: 500px;
}

【讨论】：

我倾向于远离边界，因为它们会导致浮动 div 出现问题。
但是是的，这解决了问题。我只是想知道是否有办法让轮廓与边框一起工作:)

【解决方案3】：

应该是outline-radius，但在 CSS 中（还没有）这样的属性。

如果您需要两个不同颜色的弯曲边框，您可以嵌套元素或使用 :before 伪元素做一些 CSS 技巧：

div {
    border: 4px solid #000; 
    border-radius: 12px; 
    width: 100px; 
    height: 100px;
    margin: 10px;
}
div:before {
    width:100px;
    height:100px;
    content:'';
    display:block;
    border: 4px solid #aaa;
    margin: -8px 0 0 -8px;
    padding: 4px;
    border-radius: 16px;
}

瞧！

http://jsfiddle.net/35Tjn/

【讨论】：