怎么实现一个特殊的单面css框效果

CSS代码

#beauty-boxes{

transition:all0.5sease;

position:relative;

float:left;

width:45%;

padding:2px;

margin:3px;

background:#fff;

-webkit-box-shadow:01px4pxrgba(0,0,0,0),0040pxrgba(0,0,0,0)inset;

-moz-box-shadow:01px4pxrgba(0,0,0,0.3),0040pxrgba(0,0,0,0)inset;

box-shadow:01px4pxrgba(0,0,0,0.3),0040pxrgba(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:015px10pxrgba(0,0,0,0.7);

-moz-box-shadow:015px10pxrgba(0,0,0,0.7);

box-shadow:015px10pxrgba(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-boxesp{

font-size:16px;

font-weight:bold;

}

#beauty-boxes:hover{

background-color:#161616;

color:#fff;

}

以上是“怎么实现一个特殊的单面css框效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

文章题目：怎么实现一个特殊的单面css框效果
标题路径：http://kswjz.com/article/pehjhe.html