三个技术性不强但实用的CSS

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

今天更新一个CSS的，都是一些技术性不强，实用性很高的东西！

半透明边框

先看成品图

再看代码

<div class="wrapper">
  <div class="main">
    半透明边框
  </div>
</div>

<style>
  .wrapper {
    padding: 1em;
    background-color: #327FEB;
  }
  .main {
    padding: 0.5em;
    color: #fff;
    border: 10px solid hsla(0, 0%, 100%, 0.5);
  }
</style>

核心是hsla这个函数，这个函数的说明看下面这个图:

边框内圆角

先看成品图

再看源码

<div class="wrapper">
  <div class="main">
    边框内圆角
  </div>
</div>

<style>
  .main {
    padding: 0.5em
    border-radius: 10px;
    outline: 10px solid #327FEB;
    box-shadow: 0 0 0 10px #327FEB;
  }
</style>

首先给main设置一个圆角，然后用outline属性，这个属性不管是元素是方的还是圆的，最终呈现的结果都是一个矩形。再用box-shadow的第四个属性拓展半径设置一个和边框同样颜色的阴影就可以啦！这波操作怎么样？大气层吗？

毛玻璃

先看成品图 再看源码

<div class="wrapper">
  <div class="main">
    毛玻璃哦毛玻璃，毛玻璃哦毛玻璃！<br>
    毛玻璃哦毛玻璃，毛玻璃哦毛玻璃！<br>
    毛玻璃哦毛玻璃，毛玻璃哦毛玻璃！<br>
    毛玻璃哦毛玻璃，毛玻璃哦毛玻璃！<br>
    毛玻璃哦毛玻璃，毛玻璃哦毛玻璃！<br>
    毛玻璃哦毛玻璃，毛玻璃哦毛玻璃！<br>
    毛玻璃哦毛玻璃，毛玻璃哦毛玻璃！<br>
    毛玻璃哦毛玻璃，毛玻璃哦毛玻璃！<br>
    毛玻璃哦毛玻璃，毛玻璃哦毛玻璃！<br>
  </div>
</div>

<style>
  .wrapper, .main::before {
    background-image: url('./sea.jpeg');
  }
  
  .main::before {
    position: absolute;
    top: 0; right: 0; left: 0; bottom: 0;
    z-index: -1;
    filter: blur(10px);
    margin: -1em; /** 防止白边 **/
  }
  
  .main {
    z-index: 0;
    color: #fff;
    padding: 1em;
    position: relative;
    overflow: hidden;
    background-color: hsla(0, 0%, 100%, .5);
  }
</style>

核心在于：利用伪类元素在下面放一张原图，然后利用filter和z-index来实现毛玻璃效果，建议手动敲一遍，印象更加深刻！