跨浏览器的CSS页面卷曲阴影代码,Css代码库,德仔网

代码语言

代码分类

【Css】跨浏览器的CSS页面卷曲阴影

作者:Dezai.CN / 发布于2012/12/19/ 641

.page-curl {
 position: relative;
 background: #ffffff;
 background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
 -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
 -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); }
  
 .page-curl:after {
 z-index: -1;
 position: absolute;
 background: transparent;
 width: 70%;
 height: 55%;
 content: '';
 right: 10px;
 bottom: 10px;
 -webkit-transform: skew(15deg) rotate(5deg);
 -webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3);
 -moz-transform: skew(15deg) rotate(5deg);
 -moz-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3); }
  
 .page-curl:before {
 z-index: -2;
 position: absolute;
 background: transparent;
 width: 70%;
 height: 55%;
 content: '';
 left: 10px;
 bottom: 10px;
 -webkit-transform: skew(-15deg) rotate(-5deg);
 -webkit-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3);
 -moz-transform: skew(-15deg) rotate(-5deg);
 -moz-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3); }

试试其它关键字

　卷曲阴影　

同语言下

可能有用的

Dezai.CN贡献的其它代码(4037)