css学习笔记2--多重边框-CSDN博客

(1) box-shadow方案

box-shadow支持逗号分隔，我们可以创建任意数量的投影。

它不会影响布局，也不会受到box-sizing的影响。

创建的假“边框”出现在元素的圈外，不会影响鼠标事件。但是可以通过给box-shadow属性加上insert关键字，使投影绘制在元素的圈内。

注意：它是层层叠加的，因此需要调整扩张半径。

        body {
            background: url("xxxx.jpg") ;
        }

        div {
            margin: 100px;
            width: 200px;
            height: 200px;
            background: yellowgreen;
            box-shadow: 0 0 0 10px #655,
                        0 0 0 15px deeppink,
                        0 0 0 20px rgba(0,0,0,.2);
        }
复制代码

效果如图：

(2) outline方案

如果只需要两层边框，那么你完全可以使用border+outline来实现，这一方法的优点在于边框样式十分灵活（比如虚线边框）。

        body {
            background: url("xxxx.jpg") ;
        }

        div {
            margin: 100px;
            width: 200px;
            height: 200px;
            background: yellowgreen;
            border: 10px solid #655;
            outline: 5px solid deeppink;
        }
复制代码