双边框颜色CSS

CSS中提供了双边框颜色的实现方式，可以让我们的UI更加多变。

实现方式

实现双边框颜色的方式是利用outline属性，结合box-shadow属性进行设置。

具体代码如下：

/* 首先定义要给哪个元素设置双边框 */
.box {
    /* 先给一个默认的边框 */
    border: 1px solid #ccc;
    /* 去掉默认的outline */
    outline: none;
    /* 双边框颜色 */
    box-shadow: 
        /* 下边框 */
        0 1px 0 #000,
        /* 上边框 */
        0 -1px 0 #000;
}

以上代码会给.box元素设置一组双边框，下边框为黑色，上边框为黑色。

参数说明

1. box-shadow属性是用于设置阴影的，它的参数由若干值组成，每个值都是由以下三部分组成：

   • 水平偏移量
   • 垂直偏移量
   • 模糊程度

2. 利用这个属性设置双边框颜色，需要给两个方向都设置阴影，其中，水平偏移量和模糊程度都是0，只需要改变垂直偏移量就可以了。

3. 偏移量为正，阴影就会往下移动；偏移量为负，阴影就会往上移动。

兼容性

上述代码在现代浏览器中都可以正常使用，但在IE11及以下版本中，部分属性可能不兼容。

总结

双边框颜色可以为我们的UI增添更多的变化，利用outline和box-shadow两个属性可以实现这个效果。需要注意的是，该效果在IE11及以下版本中可能存在兼容性问题。