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

最新推荐文章于 2022-05-17 12:10:10 发布

陌~上花开

最新推荐文章于 2022-05-17 12:10:10 发布

阅读量300

点赞数

分类专栏： HTML+css+js基本知识文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_45803990/article/details/117509881

版权

HTML+css+js基本知识专栏收录该内容

28 篇文章 0 订阅

订阅专栏

本文介绍了如何通过CSS技术扩大UI元素的点击区域，包括使用半透明边框和伪元素的方法。这两种方法可以确保用户在交互时不必精确点击小按钮，提高用户体验。内容详细解释了如何设置透明边框、内嵌投影以及利用伪元素创建扩大区域，并提供了实际代码示例。

摘要由CSDN通过智能技术生成

书上看的……

半透明边框

在这里插入图片描述

  .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;
        }

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

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

 <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;
        }