outline打破border-radius

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

瞧！

    

http://jsfiddle.net/35Tjn/