02.多重边框

1.可以利用box-shadow来设置多重边框 如图1所示

 .box{
            width: 100px;
            height: 100px;
            background: rgb(113, 117, 105);
            margin: 100px auto;
            border-radius:10px ;
            box-shadow:0 0 0 10px #655, 0 0 0 15px deeppink,0 2px 5px 15px rgba(0, 0, 0, .6);
        }

                                                              ![image.png](https://cdn.nlark.com/yuque/0/2021/png/22615031/1631779360512-6ece18cd-411b-4e79-8ea8-bfeb3650f20a.png#clientId=uf8944793-cbfa-4&from=paste&height=110&id=u9df08f7f&margin=%5Bobject%20Object%5D&name=image.png&originHeight=220&originWidth=225&originalType=binary&ratio=1&size=7156&status=done&style=none&taskId=u32940fbf-6d52-487f-9c72-b6d33ae88c4&width=112.5)图1

outline （描边）方案

在某些情况下，你可能只需要两层边框，那就可以先设置一层常规边 框，再加上 outline（描边）属性来产生外层的边框。 图二所示

     .box{
          width: 100px;
          height: 100px;
          background-color:yellowgreen;
          margin: 100px auto;   
          border: 5px dotted red;
          outline: 5px solid deeppink;
          background-clip:padding-box ;
      }

图二

描边的另一个好处在于，你可以通过 outline-offset 属性来控制它跟 元素边缘之间的间距，这个属性甚至可以接受负值。 图三所示

.box{
          width: 100px;
          height: 100px;
          background-color:yellowgreen;
          margin: 100px auto;   
          border: 5px dotted red;
          outline: 5px solid deeppink;
          background-clip:padding-box ;
          outline-offset: 20px;
      }

图3