CSS零碎知识点扩大可点击区域和半透明边框

书上看的……

1. 半透明边框

  .box{
     
            width: 200px;
            height: 200px;
            background-color: rgb(122, 116, 117);
            background: yellowgreen;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .inner{
     
            width: 80px;
            height: 80px;
            /* 周围透明的背景色 */
            border:solid 20px hsla(0, 0%, 100%, .2);
            background: white;
            background-clip: padding-box;
        }

2. 扩大可点击区域。项目中经常使用

没有人愿意对一个狭小的按钮尝试点按很多次，

 <div class="btn">+div>

• 第一种方法使用Border，添加透明的边框。

      .btn{
     
            width: 30px;
            height: 30px;
            font-size: 20px;
            background: chartreuse;
            display: flex;
            align-items: center;
            justify-content: center;

            /* 第一种方法 */
            border:  solid 10px transparent;
            background-clip: padding-box;
            /* 内嵌投影来模拟一道实色边框，元素的边框,元素本来的border边框 */
            box-shadow: 0 0 0 1px rgba(0, 0, 0, .3) inset;
            /*  检验下，鼠标放上扩大后的区域变成小手了*/
            cursor: pointer;
        }

当你需要给按钮加上真正的边框效果时，会发现按钮仅有的那道边框已经被我们挪作他用了。可以用内嵌投影来模拟出一道（实色）边框。

• 第二种方法使用伪元素，这种方法更好。
  给.btn添加position: relative

 /* 第二种方法使用伪元素，宿主元素添加定位 */
            position: relative;

伪元素样式:

  /* 伪元素在四个方向上都比宿主元素大出10px */
        .btn::before{
     
            content: '';
            position: absolute;
            top: -10px;
            right: -10px;
            bottom: -10px;
            left: -10px;
        }

只要有任何一个伪元素可供利用，这个方法就可以发挥作用，也不会干扰其他任何效果。
这个基于伪元素的解决方案极为灵活，我们基本上可以把热区设置为任何想要的尺寸、位置或形状，甚至可以脱离元素原有的位置

• UI经常说：“姐妹，把这个按钮热区扩大到xxx……” 。
  
  学到了……