如何实现一个特殊的单面css框效果（代码实例）

互联网 18-11-7

随着CSS3的发展，网络开发的进步已经走向了完美的想象。对于文本和其他用法，CSS drop-shadow可以实现一个好看的效果框，我们直接来看具体的代码。

这是html部分：

<div id="beauty-boxes">Some example text</div>

CSS代码

 #beauty-boxes{      transition: all 0.5s ease;      position:relative;      float:left;      width:45%;      padding:2px;      margin:3px;      background:#fff;      -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0), 0 0 40px rgba(0, 0, 0, 0) inset;      -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0) inset;      box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0) inset;      -moz-border-radius:4px;      border-radius:4px;      }      #beauty-boxes:before,     #beauty-boxes:after {      content:"";      position:absolute;      z-index:-3;      bottom:15px;      left:12px;      width:50%;      height:20%;      max-width:350px;      max-height:90px;      -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);      -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);      box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);      -webkit-transform:rotate(-3deg);      -moz-transform:rotate(-3deg);      -ms-transform:rotate(-3deg);      -o-transform:rotate(-3deg);      transform:rotate(-3deg);       }  #beauty-boxes:after {      right:10px;      left:auto;      -webkit-transform:rotate(3deg);      -moz-transform:rotate(3deg);      -ms-transform:rotate(3deg);      -o-transform:rotate(3deg);      transform:rotate(3deg);  }.beauty-boxes p {      font-size:16px;      font-weight:bold;  }    #beauty-boxes:hover{     background-color:#161616;    color:#fff;     }