CSS实现背景边框效果

前言

再漂亮的设计，也可以拆解成基础效果的组合，在这里把一些常用的效果进行了罗列，并附加代码

本文来自掘金社区maodayeyeye用最短的CSS样式，勾勒大数据演示屏

正文

优雅的呈现

---

蒙版文字

覆盖一层蒙版，并在蒙版上书写文字。需要2层，从低到上为图片层、蒙版层(上面可写字)

<div class='box'>
  <div class='back'></div>    
  <div class='modal'></div>     
</div>

<style>
  .box{
    position: relative;
    height: 200px;
    width: 300px 
  }
  .back{
    background-image: url(http://www.imaoda.com/s/img/github/21.jpg);
    height: 100%;
    width: 100%;
  }
  .modal, .desc{
    position:absolute;
    height: 20%;
    width: 100%;
    bottom: 0;
    color: white;
  }
  .modal{
    background: rgba(0,0,0,.5)
  }
</style>

毛玻璃蒙版

毛玻璃蒙版，本质上讲是两层图，底层图清晰完整，顶层图模糊残缺，并且两者位移完全一致，因此叠加到一起后像是一张图。为了确保位移一致，我们用了 background : fixed ，他能使背景图片相对于浏览器进行固定。

<div class='box'>
  <div class='blur-modal'></div>    
  <div class='black-modal'>描述文字</div>     
</div>

<style>
  .box{
    position: relative; height:200px; width:300px;
    background: fixed url(http://www.imaoda.com/s/img/github/21.jpg);
  }
  .blur-modal{
    position: absolute; height:50px; width:300px;
    top: 150px;
    background: fixed url(http://www.imaoda.com/s/img/github/21.jpg);
    filter:blur(1rem)
  }
  .black-modal{
    position: absolute; height:50px; width:300px;
    top: 150px;
    background: rgba(0,0,0,.2);
    color: white
  }
</style>

高斯模糊背景图

电影介绍的时候，其背景色跟海报差不多，其实就是放大了海报的一个角落 + 高斯模糊 + 黑色半透明蒙版的效果

<div class='suit'>
  <div class='figure'></div>    
  <div class='modal'>功夫熊猫</div>     
</div>

<style>
  .suit{
    position: relative;
  }
  .figure{
    background: url(http://www.imaoda.com/s/img/github/21.jpg);
    background-size: 200%;
    height: 200px; width: 400px;
    filter: blur(16px)
  }
  .modal{
    position: absolute;
    height: 200px; width: 400px; top: 0px; left: 0px; 
    background: rgba(0,0,0,.5);
    color: white; text-align: center
  }
</style>

filter 的还有一个特效是能让图像在边缘地带跟背景很自然的过渡到一块去

图片边框

过去做背景边框，div嵌套，外层的背景用图片，内层略小居中，但这种方法需要精准度量。更方便的方法是使用 border-image

<div class='back'>
  运行状态监控     
</div>

<style>
  body{
    background: #003366;
  }
  .back{
    height: 180px;width: 400px;
    background: url(http://www.imaoda.com/s/img/tpl/content-frame1.png) no-repeat;
    background-size: contain; 
    background-position: center;
    color: white;
    text-align: center;
  }
</style>

科技感内发光边框

边框内发光可以带来一种 未来科技感（配上动画效果更棒）

<div class='box'>
  数据总览     
</div>

<style>
  body{
    background: black;padding: 10px
  }
  .back{
    height: 20rem; width: 40rem; color:white; padding: 1rem;
    box-shadow: 0 0 3rem rgba(100,200,255,.5) inset;
    background: rgba(0,0,0,.3)
  }
</style>

科技感图片边框

border-image 的 5% 决定了边框的厚度

<div class='panel'>正常</div>
<br><br><br>
<div class='panel'>外发光</div>

<style>
  .panel{
    height: 10rem; width: 20rem; color:rgba(255,255,255,.9);
    border: 20px solid transparent;
    border-image: url(http://www.imaoda.com/s/img/tpl/border.png) 5%;
    background:rgba(0,0,0,.3);
  }
  .panel:last-child{
    box-shadow:  0 0 5rem rgb(0,110,150)
  }
</style>

科技感图片边框2

<div class='box'>正常</div>

<style>
  body{
    background: rgb(22,22,22); padding:10rem
  }
  .box{
    height: 10rem; width: 30rem;
    border: 1.5rem solid transparent;
    border-image: url(http://www.imaoda.com/s/img/tpl/border1.png) 15% 5%;
  }
</style>

聚光效果

一个外放光的圆形 border 逐渐缩小的动画：

外层固定大小，采用flex布局确定内层绝对居中对长宽进行动画

border-radius: 50% 百分比固定，保持圆形

<div class='box'>
  <div class='circle'></div>
  <div class='btn'>开始</div>
</div>

<style>
  .box{
    position: relative;
    height: 300px; width: 300px;
    display: flex; justify-content: center; align-items: center;
  }
  .circle{
    height: 200px; width: 200px;
    border-radius: 50%;
    border: 10px solid yellow;
    filter: drop-shadow(0 0 10px white);
    animation: shrink 1s infinite;
  }
  .btn{
    position: absolute; 
    top: 50%; left: 50%; transform: translate(-50%,-50%); padding:3rem;
    background:green; color: white; border-radius: 50%;
  }
  @keyframes shrink{
    100%{
      height: 10px; width: 10px;
    }
  }
</style>

亮框提示

用户点击或者 hover 的时候，边框高亮、发光，以起到提示作用

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

<style>
  li{
    display: inline-block; height: 200px; width: 150px;
    background: url(http://www.imaoda.com/s/img/github/sgs.jpg);
    background-size: 100%;
    box-shadow: 0 2px 2px #222222;
    border: 2px solid transparent;
    border-radius: 5px;
    filter: brightness(.7);
    cursor: pointer;
    transition: all .2s
  }
  li:hover{
    box-shadow: 0 0 30px yellow;
    border: 2px solid yellow;
    transform: translate(0,-10%);
    filter: brightness(1);
  }
</style>