css技巧——边框

实现给一个容器设置一个半透明的边框，其父元素的背景色会从边框里透出来的效果

.box{
          width: 50px;
          height: 50px;
          border: 10px solid hsla(0, 0%, 100%, .5);
          background: white;
      }

结果显然是不行的，因为默认情况下，背景色会延伸到边框所在区域的下层，类似一种覆盖，边框确实实现了半透明，但它的下层是内容区部分的延伸，所以看起来没起效果 我们可以利用background-clip属性，它的初始值为border-box,我们改为padding-box，这样浏览器就会沿内边距的外沿把背景裁切掉

.box{
          width: 50px;
          height: 50px;
          border: 10px solid hsla(0, 0%, 100%, .5);
          background: white;
          background-clip: padding-box;
      }

效果完美实现

多重边框

使用box-shadow实现，利用box-shadow的第四个参数（扩张半径）

   .box{
          width: 50px;
          height: 50px;
          background: yellowgreen;
          box-shadow:0px 0px 0px 10px greenyellow；
      }

这样就能实现类似边框的效果，当然你可能会说，我直接用边框也是一样的效果啊。但box-shadow的特别之处在于它支持逗号分隔语法，所有我们可以创建任意数量的投影，如：

 box-shadow:0px 0px 0px 10px greenyellow,0px 0px 0px 20px skyblue;

这样一来就有了两层边框，不过要注意，这种方式是层层叠加的，所以需要按照规律调整扩展的半径，如上面的示例，想要在外层再加一道10px的边框，那么扩张半径的值为10px + 10px，所以第二条边框的值为20px

这种方法有两点需要注意

1.阴影不会影响布局，也不受box-sizing的影响

2.它并不会响应鼠标事件

边框内圆角

实现容器内侧为圆角，而边框四个角仍是直角的效果

这没什么难的，用两个元素就能轻松实现

.box{
          width: 50px;
          height: 50px;
          padding: 20px;
          background: yellowgreen;
      }
      .box>.content{
          width: 50px;
          height: 50px;
          border-radius: 15px;
          background-color: skyblue;
      }

但如果我要只用一个元素呢？使用outline和box-shadow属性能做到这个效果

 .box{
          width: 50px;
          height: 50px;
          padding: 20px;
          background: yellowgreen;
          border-radius: 15px;
          box-shadow: 0 0 0 12px skyblue;
          outline: 12px solid skyblue;
      }

描边不会跟着元素的圆角走，但是box-shadow会，且刚好会填补描边和容器圆角之间的空隙，二者组合就实现了这种效果