2-1 用 box-shadow 来模拟外框

image.png

  1. .box{
  2. width: 100px;
  3. height: 100px;
  4. background: yellowgreen;
  5. box-shadow: 0 0 0 10px orangered,
  6. 0 0 0 15px turquoise,
  7. 0 2px 5px 15px rgba(0,0,0,.6);
  8. margin:20px auto;
  9. }

2-2 outline 方案

image.png

  1. .box{
  2. margin: 20px auto;
  3. width: 200px;
  4. height: 100px;
  5. background: yellowgreen;
  6. border: 10px solid #655;
  7. outline: 2px dotted red;
  8. outline-offset: -10px;
  9. }
  10. outline-offset --控制它跟元素边缘之间的间距 接受负值