css 3道杠的实现方式

方法1

这个是利用border的double属性显示上面的2道杠，然后是border-bottom的solid显示下面的1道杠

#box1{
    border-top:60px double red;
    width: 100px;
    padding-top: 20px;
    border-bottom: 20px solid red;
}

方法2

这个方法和方法1很相似，只不过第三道杠是通过background-clip实现的，一般情况下，背景色是从border开始渲染的，通过background-clip指定渲染的位置，此处为content-box。

#box2{
    border-top:60px double red;
    width: 100px;
    height: 20px;
    padding-top: 20px;
    background-clip: content-box;
    background-color: red;
}

方法3

这个是利用上下border设置第一第三道杠，中间通过方法2的方式实现第二道杠，然后在中间空白的地方用padding撑开。

#box3{
    border-top: 20px solid red;
    border-bottom: 20px solid red;
    padding: 20px 0px;
    width: 100px;
    height: 20px;
    background-color: red;
    background-clip: content-box;
}