css揭秘 - 多重边框 + 边框内圆角

多重边框

随着多重背景的兴起，多重边框在平时开发中使用的频率也越来越高了，我们肯定是希望在一个元素的基础上通过css代码去灵活的实现这一需求，接下来我们一起看看实例吧~

box-shadow解决方案

box-shadow在我们平时开发中作为酷炫的边框投影，大家肯定都不陌生，但是很少人知道的是它还接受第四个参数，被称为“”，通过指定正值和负值从而让投影的面积增大或者减少，当我们把投影的两个偏移量以及模糊值都设置成0，同时扩张半径设置成正值，我们就可以得到一条实线边框~ 由于投影是支持逗号分隔的，所以我们可以创建任意数量的投影~ ↓

 box {
      margin: 40px;
      width: 100px;
      height: 50px;
      background-color: blueviolet;
      box-shadow: 0 0 0 10px #655,  0 0 0 15px red;
    }
    .box:hover{
      background-color: hotpink;
    }

<div class="box"></div>

image

通过gif图，我们可以看到box-shadow确实可以满足我们多边框的需求，但是投影的行为和边框完全不同，他不会影响布局，也不会受box-sizing的属性影响，但悬停和点击在投影上也是没有作用的~ 其实我们可以通过的问题~

.box{
      margin: 80px;
      width: 300px;
      height: 100px;
      background-color: chartreuse;
      /* 通过设置inset去解决悬停和点击的问题 */
      box-shadow: 0 0 0 10px deeppink inset,  0 0 0 25px #655 inset;
    }
    .box:hover{
      background-color: hotpink;
    }

image

设置inset之后，我们就完美的解决了鼠标悬停在投影上产生的问题了~

outline方案

在某些时候我们可能只需要两层边框，我们可以通过设置常规边框，外加属性来产生外层边框，这样会更加的灵活，因为outline产生的边框样式很灵活,可以修改线型，颜色，宽度,同时它不会占据空间，还是一起来看看实例吧~

 .multiple-border {
      margin: 20px;
      width: 180px;
      height: 60px;
      background-color: chartreuse;
      border: 10px solid #665;
     /* 可以设置一个虚线的外层边框 */
      outline: 5px dashed deeppink;
    }
   
 <div class="multiple-border"></div>

image

其实我们还可以通过属性来设置描边与元素之间的间距，它支持正值和负值~

边框内圆角

有的时候我们在做一个容器样式的时候，希望可以实现一个内侧是圆角，而边框或者描边仍然是直角，其实我们用两个元素可以很简单并且很灵活的实现这个效果，不过，如果我们要实现纯色的这种圆角效果 我们是可以通过只用到一个元素去实现的，具体我们一起看看实例吧~

通过outline + box-shadow属性

.box{
      margin: 20px;
      height: 50px;
      width: 100px;
      background-color: chartreuse;
      border-radius: .8em;
      outline: .6em solid #655;
      padding: 1em;
      /* box-shadow是会跟着描边走的 */
      box-shadow: 0 0 0 .4em #655; 
    }
<div class="box"></div>

image

效果如上，其实我们主要是通过，而的的特性来实现这个小的需求，我们可以把描边和投影的颜色设置成两个颜色，从视觉上更好的理解一下这个思想~

image

看到这个图大家可能会有个疑问，到底多大的投影扩张值可以填补这些空隙呢~ 在这里具体的计算逻辑我就不多赘述了，这边主要是用到之前的勾股定理，这个值需要，同时要大于 (r表示border-radius),具体的我们可以看《css揭秘》的图解来更好的理解这个逻辑~

image

总结

本章节主要是介绍了关于css边框的一些使用，着重介绍了box-shadow和outline的一些特性，希望大家可以从本篇博客中，有所收获哦~ 😺