圆轮廓的角落？ [复制]答案

【问题标题】：Round the corners of outline? [duplicate]圆轮廓的角落？ [复制]
【发布时间】：2012-07-31 05:10:46
【问题描述】：

所以我有这四个向左浮动的框，每个框的宽度为页面的 50%。我希望它们的轮廓为1px solid gray，并且我想用 6px 圆角。我知道我可以使用border:1px solid gray; 和border-radius:6px;，但问题是边框增加了元素的宽度。因为盒子有 50% 的宽度，而且它们是向左浮动的，所以我不能给它们添加边框。那么是否可以将outline圆角制作成圆角？

Edit:CSS-only 解决方案最好，因为我需要支持除 IE6 之外的所有浏览器。

【问题讨论】：

标签： css outline

【解决方案1】：

控制边框的最佳方法是使用 box-shadow。它保持圆角，可以在外部或内部（带有inset）。

示例：

box-shadow: 0px 0px 0px 2px black;
/*outside border black 2px width*/

box-shadow: 0px 0px 0px 2px black inset;
/*inside border black 2px width*/

【讨论】：

box-shadow 在 IE9 之前不受支持。在另一个答案中也已经提出了建议。

【解决方案2】：

另一种方法是使用 OUTLINE 属性以及 80 像素的 BORDER-RADIUS。如下：

outline: 5px #FFF;
border-radius: 80px;

这适用于小图像，而不是太大的图像。如果您想在较大的图像上使用圆边系统，您必须按照其他人所说的那样做，并使用以下代码：

-moz-border-radius:0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius:0 0 10px 10px;
border:1px solid gray;

【讨论】：

它不起作用。测试一下。大纲在边界之外。无论边界半径如何。 jsfiddle.net/UJmEk。此外，这个问题已有一年多的历史了，它有一个公认的答案。

【解决方案3】：

有一个workaround as per this answer。但是您仍然需要设置outline:0 并使用border-radius 和/或box-shadow。

【讨论】：

我不喜欢变通办法，因为它们往往只在特定的浏览器中工作。
@ChristianNikkanen：你至少尝试过这种方法吗？它只是在当今所有领先的浏览器中实现的 CSS3。
再一次，有特定于 IE 的 methods 。你不觉得支持IE7有点过分吗？ :)

【解决方案4】：

我的想法未经测试，但是使用 50% 的 div 作为带边框的实际 div 的容器怎么样？
然后，边界 div 将 height 和 width 设置为 auto 并将它们的 left、right、top 和 bottom 设置为 0px

【讨论】：

【解决方案5】：

您仍然可以使用box-sizing 对边框执行此操作。它包括元素总宽度中的边框宽度，为fairly supported。

【讨论】：

是否所有浏览器都支持，不包括IE6？
说IE7不支持。
我知道只有 css 的解决方案会更好，但也许 github.com/albertogasparin/borderBoxModel 是一种选择。或者一些有条件的 ie7 css 样式。
必须有办法在css中实现这一点。没有条件。
好吧，box-radius isn't supported 在旧版浏览器中，所以我认为你不需要尝试让它与 >ie8 的边框一起使用。在这种情况下，我仍然会使用一些使用大纲的条件样式表。不确定是否真的存在没有条件的纯 CSS 方式。

【解决方案6】：

使用以下css属性制作圆角边框

-moz-border-radius:0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius:0 0 10px 10px;
border:1px solid gray;

如果你使用这个。请发布您使用的一些代码。只有我们才能找到错误或任何修改需要...

谢谢

【讨论】：