css - 轮廓打破边界半径

Question

我试图在谷歌上四处寻找答案，但不幸的是没有任何运气。由于某种原因，以下 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) 中对此进行测试。任何帮助将不胜感激！

Answer 1

为什么不使用

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

Answer 2

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/了解更多信息）

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

瞧！

​</p>

http://jsfiddle.net/35Tjn/