多重边框

box-shadow

  • box-shadow接收五个参数 第四个参数被称作扩张半径 即类似边框的宽度 第五个为颜色

  • 好处:与border相比 作用基本一致 好处是可以用逗号隔开 来添加更多边框

  • 注意事项:1. 和border不同 不会受到box-sizing影响

        2. 不会响应点击或者悬停事件 如有必要,加上`inset`使其进入内圈 需要额外空出相应的内边距
    
        3. 只能实线边框
    

code

box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;

一个圆心

outline

border: 10px solid #655; 
outline: 5px solid deeppink;
  • 好处:1.可以通过 outline-offset控制与边框之间的间距 2.边框样式十分灵活

  • 注意事项 1.不会贴合border-radius造成的圆角 2.局限于双层边框 多层用box-shadow 3.描边可以不是矩形 不同浏览器可能存在差异