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

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
}