css3----盒子阴影巧妙运用

盒子阴影的几种用法

1.可以做边框

 .box {
     margin: 100px auto;
     width: 200px;
     height: 300px;
     background-color: #ccc;
     box-shadow: 0 0 0 4px red;
 }    
 注:盒子阴影只写阴影大小尺寸和颜色可以显示边框

2.可以做三个方块(用一个div)

.box {

  margin: 100px auto;
  width: 200px;
  height: 300px;
  background-color: #ccc;
  box-shadow: 50px 0 0 0 red, -50px 0 0 0 green;
  注:盒子阴影可写多个值,用逗号隔开

}

3.可以让方块变高时不抖动

不用盒子阴影时浮动的盒子会向下变高

  li {
      float: left;     
      width: 10px;
      height: 10px;
      margin-right: 10px;
      background-color: #000;
      list-style: none;
  }
  
  li:hover {
      height: 20px;
      background-color: aqua;
  }

为什么会向下变高? 因为浮动的元素顶部对齐

这时用盒子阴影就可以解决这个问题

  li {
      float: left;
      width: 10px;
      height: 10px;
      margin-right: 10px;
      background-color: #000;
      list-style: none;
  }
  
  li:hover {
      box-shadow: 0 -10px 0 0 aqua;  只有这行代码改变
      background-color: aqua;
  }

最后:盒子阴影不占位置