首页 >web前端 >css教程 >如何实现一个特殊的单面css框效果(代码实例)

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

不言
不言原创
2018-11-07 16:39:352511浏览

随着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;
    }

效果如下:

GIF.gif


以上是如何实现一个特殊的单面css框效果(代码实例)的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn