领先的免费Web技术教程，涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

每天一个CSS小技巧 - 半透明边框

nixiaole 2024-11-19 08:31:17 知识剖析 24 ℃

问题


假设我们想给一个容器设置一层白色背景和一道半透明白色边框

html代码：

<body>
  <div class="box1"></div>
</body>

一开始你可能想这么做

  <style>
    body{
      background: black;
    }
    .box1{
      width: 200px;
      height: 200px;
      /*看这里*/
      border: 10px solid hsla(0, 0%, 100%, .5);
      background: white;
    }
  </style>

但这样得到的效果是：


虽然得到了白色的背景，但半透明的边框去哪里了？

解决方案

尽管看起来有问题，但边框是实际存在的。默认情况下，背景会延伸到边框所在的区域下层，这一点很容易验证，我们只需要把边框属性中的solid改为dashed，就能验证，这里特地把边框颜色改为绿色，这样会使效果更明显

    body{
      background: black;
    }
    .box1{
      width: 200px;
      height: 200px;

      border: 10px dashed hsla(120, 100%, 60%, .5);
      background: white;
    }


所以我们原本做的事情并没有让body的背景从半透明白色边框处透出来，而是在半透明白色边框处透出了这个容器自己的纯白色背景，这实际上得到的效果跟纯白色的边框看起来完全一样。

而这就是背景的工作原理。我们只能接受它并且向前看。好在我们可以通过backgound-clip属性来改变上述默认的行为所带来的不便。

这个属性的初始值是border-box，意思是背景会延伸到边框的外沿框，如果不希望背景侵入边框所在的范围，只需这么做即可

  <style>
    body{
      background: black;
    }
    .box1{
      width: 200px;
      height: 200px;

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

把background-clip的属性设置为padding-box，这样背景只会延伸到边框的内沿框，效果如下：


Tags：

猜你喜欢

最近发表
标签列表