CSS双边框（2种颜色）不使用轮廓？ [英] CSS double border (2 colors) without using outline?

问题描述

我想知道你们是什么想法是最容易的方式获得一个双边框与2颜色的div？我尝试使用边框和大纲在一起，它在Firefox中工作，但大纲似乎不工作在IE和这是一个问题。

I was wondering what you guys think is the easiest way to get a double border with 2 colors around a div? I tried using border and outline together and it worked in Firefox, but outline doesn't seem to work in IE and that's sort of a problem. Any good ways to go about this?

这是我已经，但大纲不能与IE工作：
outline：2px solid＃36F;
border：2px solid＃390;

This is what I had but outline does not work with IE: outline: 2px solid #36F; border: 2px solid #390;

谢谢。

推荐答案

您可以使用伪元素添加多个边框，并将它们放置在原始边框周围。没有额外的标记。跨浏览器兼容，这已经周围从CSS 2.1。
我在jsfiddle上为你演示了一个演示。注意​​，边框颜色之间的间距是为例子。您可以通过更改绝对定位中的像素数来关闭它。

You can add multiple borders using pseudo elements, and the place them around your original border. No extra markup. Cross-browser compatible, this has been around since CSS 2.1. I threw a demo up on jsfiddle for you....note, the spacing between border colors is there for the example. You can close it by altering the number of pixels in the absolute positioning.

.border
{
    border:2px solid #36F; 
    position:relative;
    z-index:10
}

.border:before 
{
    content:"";
    display:block;
    position:absolute;
    z-index:-1;
    top:2px;
    left:2px;
    right:2px;
    bottom:2px;
    border:2px solid #36F
}

http：//jsfiddle.net/fvHJq/1/

这篇关于CSS双边框（2种颜色）不使用轮廓？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！