11

我将以下代码用于不同颜色的 2 个边框以及边框之间的空间。我将该属性outline-offset用于边界之间的空间。然而，它在 IE 中不受支持（甚至 IE9 也不支持）。是否有任何替代解决方案也适用于 IE，而无需在 html 中添加另一个 div。

HTML：

<div class="box"></div>

CSS：

.box{
    width: 100px;
    height: 100px;
    margin: 100px;
    border: 2px solid green;
    outline:2px solid red;
    outline-offset: 2px;    
}

高度和宽度不固定，我只是用于示例。

JSFiddle：http: //jsfiddle.net/xyXKa/

4

4 回答 4

19

这里有两个解决方案。首先是 IE8+ 兼容，利用pseudoelements. 在JSFiddle上查看它。

HTML：

<div class="box"></div>

CSS：

.box {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 100px;
    border: 2px solid green;
}
.box:after {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    display: block;
    width: 108px;
    height: 108px;
    border: 2px solid red;
}

​我的第二个想法是一个非语义的解决方案，但给你 IE6+ 支持。在JSFiddle上查看它。

HTML：

<div class="outer-box"><div class="inner-box"></div></div>

​ CSS：

.outer-box {
    width: 104px;
    height: 104px;
    margin: 100px;
    border: 2px solid red;
    padding: 2px;
}
.inner-box {
    width: 100px;
    height: 100px;
    border: 2px solid green;
}

​ 哦，糟糕，我刚看到你要求只留下一个div。嗯，第一个解决方案符合这些要求！

于 2012-10-29T02:52:32.413 回答
5

Some more solutions. I've used them successfully:

1.

.box {
outline:2px solid green;
border:2px solid transparent;
box-shadow: 0 0 0 2px red inset;
}

Restriction of this solution: "outline" property ignores "border-radius" one.

2.

.box {
border: 2px solid green;
box-shadow: 0 0 0 2px #fff inset, 0 0 0 4px red inset;
}

Restriction of this solution: space between red and green borders can't be transparent because red box-shadow will be visible through it. So, any solid color needed, I've set #fff.

于 2013-05-20T14:08:47.243 回答
0

为此，我对其他解决方案的问题：

"outline-offset" 与 IE 不兼容；伪元素方法需要绝对定位和像素比（对我的响应式设计没有好处）；插入框阴影不会显示在图像上。

这是我用来以与 IE 兼容的方式响应式构图的修复程序：

.container img { 
        border:2px solid white;
        outline:4px solid red;
        background-color: green;
        padding: 2px;
}

“outline”定义了外边框，“border”定义了中间的空间，而内边框实际上是背景颜色，填充决定了它的宽度。

于 2013-09-07T14:48:57.597 回答
0

::focus在您为伪类设置样式的情况下，您将无法享受使用::after或::before伪类的奢侈，因为这些方法仅对容器元素有效（ 有关更多信息，请参阅W3C 规范） 。

释放这种抵消效果的跨浏览器解决方案是使用box-sizing,border和padding.

您只需否定和交替填充和边框宽度值。

默认/基本样式：

input[type="text"] {
  ...
  padding:10px;
  border:1px solid grey;
}

伪类样式：

input[type="text"]:focus {
  padding:8px;
  border:3px solid red;
}
于 2017-08-18T12:21:05.503 回答