透明边框

最新推荐文章于 2022-11-04 23:01:33 发布

妙趣前端

最新推荐文章于 2022-11-04 23:01:33 发布

阅读量1.1k

点赞数 3

分类专栏： CSS 干货 web 文章标签： html css3 css

本文链接：https://blog.csdn.net/qq_45768871/article/details/112796432

版权

web 同时被 3 个专栏收录

84 篇文章 4 订阅

订阅专栏

干货

40 篇文章 1 订阅

订阅专栏

CSS

25 篇文章 0 订阅

订阅专栏

文章目录

透明边框

透明边框

相信你以前肯定尝试过 CSS 中的半透明颜色，比如 rgba()和hsla()。半透明颜色是 2009 年发生的一场重大变革。从那以后，我们终于可以在网页设计中使用它们了，但是为了尝鲜还需要付出额外的代价。比如说，我们需要做好回退，加载 shim 脚本，甚至在 IE 下还需要用到恶心的滤镜来hack。尽管半透明颜色很受欢迎，但人们对它的使用基本上还是集中在背景上的。这里面有一些原因。

问题

假设我们想给一个容器设置一层白色背景和一道半透明白色边框，body
的背景会从它的半透明边框透上来。我们最开始的尝试可能是这样的：

border: 10px solid hsla(0,0%,100%,.5);
background: white;

在这里插入图片描述

除非你对背景和边框的工作原理有着非常好的理解，否则这个结果（参见图 2-2）可能会令你摸不着头脑。我们的边框去哪儿了啊？而且如果我们连使用半透明颜色都不能实现半透明边框，那我们还有什么办法？！

默认情况下，背景会延伸到边框所在的区域下层。这一点很容易验证，给一个有背景的元素应用一道老土的虚线边框，

就可以看出来即使你使用的不透明的实色边框，这个事实也不会有任何改变。只不过在上面的例子中，这个特性完全打破了我们的设计意图。我们所做的事情并没有让 body 的背景从半透明白色边框处透上来，而是在半透明白色边框处透出了这个容器自己的纯白实色背景，这实际上得到的效果跟纯白实色的边框看起来完全一样。

举例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        html {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 100%;
            background-image: url(https://file06.16sucai.com/2016/0112/1b83052412069d6efbe923997d0d8939.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        
        #app {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 30px solid rgba(31, 16, 240, 0.3);
            background: white;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
            color: blueviolet;
            /* background-clip: padding-box; */
        }
    </style>
</head>

<body>
    <div id="app">
        我想透明
    </div>
</body>

</html>

在这里插入图片描述

解决方案

在 CSS 2.1 中，这就是背景的工作原理。我们只能接受它并且向前看。谢天谢地，从背景与边框（第三版）（http://w3.org/TR/css3-background）开始，我们可以通过 background-clip 属性来调整上述默认行为所带来的不便。这个属性的初始值是 border-box，意味着背景会被元素的border box（边框的外沿框）裁切掉。如果不希望背景侵入边框所在的范围，我们要做的就是把它的值设为padding-box，这样浏览器就会用内边距的外沿来把背
景裁切掉。

在这里插入图片描述

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

在这里插入图片描述

测试

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        html {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 100%;
            background-image: url(https://file06.16sucai.com/2016/0112/1b83052412069d6efbe923997d0d8939.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        
        #app {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 30px solid rgba(31, 16, 240, 0.3);
            background: white;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
            color: blueviolet;
            background-clip: padding-box;
        }
    </style>
</head>

<body>
    <div id="app">
        我想透明
    </div>
</body>

</html>