透明边框

文章目录

  • 透明边框
    • 问题
      • 举例
    • 解决方案
      • 测试
    • 总结

透明边框

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

问题

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

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

透明边框_第1张图片

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

默认情况下,背景会延伸到边框所在的区域下层。这一点很容易验证,给一个有背景的元素应用一道老土的虚线边框,
透明边框_第2张图片
就可以看出来即使你使用的不透明的实色边框,这个事实也不会有任何改变。只不过在上面的例子中,这个特性完全打破了我们的设计意图。我们所做的事情并没有让 body 的背景从半透明白色边框处透上来,而是在半透明白色边框处透出了这个容器自己的纯白实色背景,这实际上得到的效果跟纯白实色的边框看起来完全一样。

举例


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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>

透明边框_第3张图片

解决方案

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

透明边框_第4张图片

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

透明边框_第5张图片

测试


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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>

透明边框_第6张图片

总结

理解背景色的区域,如何修改背景色编辑区域

透明边框_第7张图片

你可能感兴趣的:(CSS,干货,web,html,css3,css)