创建双线边框的好方法？

Question

这就是我所说的（有两种不同的颜色）：

我唯一的解决方案是创建两个跨度div并在一个上添加一个border-right而在另一个上添加一个border-left。但是，我觉得有一种方法可以用更少的代码实现这一点。

HTML

<span class="border-right"></span>
<span class="border-left"></span>

CSS

.border-right { border-right: 1px solid #eee }
.border-left { border-left: 1px solid #888 }

有人知道更好的方法吗？另外，黑色背景div的高度没有设定的高度，那么无论高度如何，我如何确保两个span元素从上到下适合？

Answer 1

最简单的解决方案是给出一个单独的左/右边界，跨度宽度为零。

span { 
  display: inline-block; vertical-align: middle;
  line-height: 24px; height: 24px; 
}
span.dbl {
  border-left: 2px solid blue;
  border-right: 2px solid red;
  width: 0px;
}
div { background-color: #eee; }

<div>
  <span>Something on left</span>
  <span class="dbl"></span>
  <span>Something on right</span>
</div>

Answer 2

您也可以使用pseudo元素

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}
.first,
.second {
  width: 100px;
  text-align: center;
  display: inline-block;
}
.first {
  border-right: 2px solid red;
  position: relative;
}
.first:after {
  content: '';
  position: absolute;
  height: 100%;
  top: 0;
  width: 2px;
  right: -4px;
  background: yellow;
}

＆＃13;

<div class="first">test</div>
<div class="second">test</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你可以通过

来完成

border-right:2px double black;

Answer 4

@Akshay和@abhitalks得到了很好的答案，最简单的方法就是这样做：

border-right: 10px solid blue;
box-shadow: 10px 0 0 red;

这是一个工作小提琴：

http://jsfiddle.net/off3f1gg/

Answer 5

您好，请尝试使用此代码帮助

    <h2>Demo 1</h2>
<div class="header">
    <div class="left-shide"></div>
    <div class="right-shide"></div>    
</div>

<h2>Demo 2</h2>
<div class="header">
    <div class="left-shide2"></div>
    <div class="right-shide2"></div>    
</div>

CSS

.header{
    height:50px;
    width:100%;
    background-color:rgb(15, 15, 15);
    float:left;
}

.left-shide{
    float:left;
    height:50px;
    width:20%;
    border-right:1px solid rgb(0,0,0);
}
.right-shide{
    float:left;
    height:50px;
    width:20%;
    border-left:1px solid rgb(60,60,60);
}



/*Demo 2 **/
.left-shide2{
    float:left;
    height:50px;
    width:20%;
    box-shadow:1px 0 1px rgba(0,0,0,1);
}
.right-shide2{
    float:left;
    height:50px;
    width:20%;
    border-left:1px solid rgb(60,60,60);
}

直播 Demo