css-设计一个半透明边框

every-day-css-1

css-设计一个半透明边框

• 先看一下效果： lpx1rlr4j9.codesandbox.io/

根据 background-clip的不同设置的不同情况

• 关键词background-clip MDN

• 关键词hsla/rgba 透明度 MDN

• 默认情况下，背景的颜色会延伸至边框下层，这意味着我们设置的透明边框效果会被覆盖掉，在css3中，我们可以通过设置background-clip:padding-box来改变背景的默认行为，达到我们想要的效果。

<style>
  main{
    width: 100%;
    padding: 60px 80px 80px;
    background: #b4a078;
  }
  div{
    padding: 12px;
    margin: 20px auto;
    background: white;
    border: 10px solid hsla(0, 0%, 100%, .5);
    //border: 10px solid rgba(0,0,0,0.5)
  }
  label{
    color: #f4f0ea;
  }
  input[id="pb"]:checked ~ div{
    background-clip: padding-box;
  }
  //当然你可以试试 content-box 和 border-box 的情况,需要每次刷新页面查看情况
</style>
<template>
  <main>
    <input id="pb" type="checkbox" checked/>
    <label for="pb">padding-box(默认)</label>
    <div>ri so so xi do xi la so la xi xi xi xi la xi la .</div>
  </main>
</template>
复制代码

参考

• developer.mozilla.org/zh-CN/docs/…
• lhammer.cn/You-need-to…