css揭秘的一些笔记

一， 背景与边框

1. 当我们div背景色是白色，然后我们想给这个div加上一个白色半透明的边框的时候发现这个边框怎么不存在？

看不见半透明边框 看见半透明边框

其实这个边框是实际存在的，只不过在设置边框的时候，背景会被边框压下去，也就是说平时我们看到的边框实际上是加在背景上面的如果边框颜色与背景色不一样那我们能很快辨别出来，像上面用同样的颜色但是不一样的透明度来体现的话需要给div设置一个background-clip，其值是padding-box; 这样浏览器就会用内边距的外沿把背景剪裁掉。

div{
  background: #fff;
  border: 3px solid rgba(255, 255, 255, 0.5);
  background-clip: padding-box;
}

2. 多重边框

其实在没有发现多重边框之前我想达到这种效果都是div一个个嵌套，不像现在这样简单便捷就写出来
解决方案是box-shadow的多重边框

多重边框

div{
  box-shadow: 0 0 0 10px #fff,
              0 0 0 15px #dedede,
              0 2px 5px 15px rgba(0, 0, 0, 0.5); 
}