Question

我有一个带边框的简单div：

.box {border: 1px solid black; width: 100%; height: 200px}

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

我想添加第二条垂直线，将div切成两半，位于框左边缘内30px：

  30px     remaining width
____________________________
|      |                    |
|      |                    |
|      |                    |
|______|____________________|

有没有办法用CSS3做到这一点？我正在考虑与伪元素有关但无法解决我想要的效果。

由于

Answer 1

DEMO您可以使用css pseudo element

.box {border: 1px solid black; width: 100%; height: 200px ;position:relative;}
.box:before{
    position:absolute;
    content:'';
    width:30px;
    height:100%;
    border-right:1px solid black;
    left:0;
    top:0;
}

您可以box-shadow使用Demo

.box {
border: 1px solid black; 
width: 100%; 
height: 200px ;
position:relative; 
box-shadow:inset 30px 0 0 white, inset 31px 0 0 black
}

Answer 2

是。使用pseudo element：

.box {border: 1px solid black; width: 100%; height: 200px; position:relative;}
.box:after {content:'';
    display:block;
    position:absolute;
    width:30px;
    border-right: 1px solid black;
    top:0;
    bottom:0;
}

http://jsfiddle.net/nwvb22rg/

Answer 3

.box:before{content:''; 
            display:block;
            position:absolute; 
            height: 200px; 
            border-left: 1px solid #000; 
            margin-left:30px}

http://jsfiddle.net/x8m5gnga/

如何在div中创建第二个边框

3 个答案: