我正在尝试重新创建这两个堆叠在另一个没有图像的内容框 - http://i.imgur.com/j9O9j.png这是可能的还是必须将图像用于下部框？
问问题
267 次
2 回答
4
它可以很好地复制，在……几乎任何浏览器中使用最少的标记，真的。我做了两个版本，两者的HTML是一样的。
<div class='box box1'>
<div class='box1-content'>Box 1 content goes here.</div>
</div>
<div class='box box2'>Box 2 content goes here.</div>
第一个版本使用CSS 3D 转换，应该可以在 Safari、Chrome、Firefox 和 IE10 中使用。Opera 和 IE9（以及更早的版本）不支持 3D 变换，因此不适用于这些。
演示
相关CSS：
html { background: linear-gradient(#165284, #3672a4) no-repeat; }
.box { position: relative; margin: 0 auto; width: 90%; }
.box1-content, .box2 { box-sizing: border-box; padding: 1%; min-height: 16em; }
.box1 { z-index: 2; margin-bottom: 1.6em; box-shadow: 0 1.4em 1em -1em; }
.box1:before, .box1:after {
position: absolute;
z-index: -1;
top: .5em; right: .6em; bottom: .5em; left: .6em;
border-radius: .35em;
box-shadow: 0 0 2em;
content: '';
}
.box1:before { transform: skewX(5deg); }
.box1:after { transform: skewX(-5deg); }
.box1-content {
border-radius: 0 0 .5em .5em;
background: linear-gradient(-45deg, #e14f00, #f88d00);
}
.box2 { z-index: 1; background: gainsboro; perspective: 32em; }
.box2:before {
display: block;
position: absolute;
bottom: 100%; left: 0;
width: 100%; height: 5em;
transform: rotateX(45deg);
transform-origin: 50% 100% 0;
background: linear-gradient(dimgrey, silver);
content: '';
}
第二个版本的兼容性更好，应该可以在 Chrome、Safari、Firefox、IE9+ 和 Opera 中完全工作（阴影 + 模拟 3D 效果）。IE8 中也应该模拟 3D 效果，即使阴影不存在。
演示
相关CSS：
html {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#165284',
endColorstr='#3672a4', GradientType=0); /* fallback for IE9/8 */
background: linear-gradient(#165284, #3672a4) no-repeat;
}
.box { position: relative; margin: 0 auto; width: 90%; }
.box1-content, .box2 { box-sizing: border-box; padding: 1%; min-height: 16em; }
.box1 {
z-index: 2;
margin-bottom: 1.6em;
box-shadow: 0 1.4em 1em -1em; /* not supported in IE8 */
}
.box1:before, .box1:after {
position: absolute;
z-index: -1;
top: .5em; right: .6em; bottom: .5em; left: .6em;
border-radius: .35em; /* not supported in IE8 */
box-shadow: 0 0 2em; /* not supported in IE8 */
content: '';
}
.box1:before { transform: skewX(5deg); } /* not supported in IE8 */
.box1:after { transform: skewX(-5deg); } /* not supported in IE8 */
.box1-content {
border-radius: 0 0 .5em .5em;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e14f00',
endColorstr='#f88d00', GradientType=1); /* fallback for IE9/8 */
background: linear-gradient(-45deg, #e14f00, #f88d00);
}
.box2 { z-index: 1; background: gainsboro; }
.box2:before {
position: absolute;
bottom: 100%; right: 0; left: 0;
border: solid 4em transparent;
border-bottom: solid 5em silver;
content: '';
}
您可以尝试使用附加元素而不是伪元素来模拟 IE8/3D 效果的阴影和 IE7 的阴影，并对它们应用矩阵变换/阴影过滤器，但我认为这不值得。
于 2013-01-19T04:52:37.493 回答