我已经创建了一个形状,它代表了一个页面的阴影,它的底部越来越大。
body {
background: #dddddd;
}
div {
background: white;
margin: 40px auto;
height: 300px;
width: 300px;
position: relative;
padding: 10px;
}
div:before,
div:after {
height: 96%;
z-index: -10;
position: absolute;
content: "";
left: 8px;
top: 2%;
width: 30%;
max-width: 300px;
background: transparent;
box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.5);
transform: rotate(1.5deg);
}
div:after {
transform: rotate(-1.5deg);
right: 8px;
left: auto;
box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.5);
}
<div></div>
我需要旋转这个,但是当我尝试添加transform: rotate(10deg)
时,box-shadow
的错觉被破坏了,并在父层的顶部。
body {
background: #dddddd;
}
div {
background: white;
margin: 40px auto;
height: 300px;
width: 300px;
position: relative;
padding: 10px;
transform: rotate(10deg);
}
div:before,
div:after {
height: 96%;
z-index: -10;
position: absolute;
content: "";
left: 8px;
top: 2%;
width: 30%;
max-width: 300px;
background: transparent;
box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.5);
transform: rotate(1.5deg);
}
div:after {
transform: rotate(-1.5deg);
right: 8px;
left: auto;
box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.5);
}
<div></div>
我发现了这个问题:哪个CSS属性创建堆叠上下文?但是似乎没有针对我的要求的解决方案。
在我的情况下会有什么好的解决方案吗?我不介意它们是SVG
, filter
, canvas
还是其他任何东西,只要它得到合理的支持。
如果你使用另一个div
,它解决了你遇到的问题,所以背景颜色是在内部div
和旋转是在外部div
。
否则可能需要使用另一种方法来获得相同的结果。
body {
background: #dddddd;
}
.two{
background: white;
height: 300px;
width: 300px;
padding: 10px;
}
div.one {
margin: 40px auto;
height: 300px;
width: 300px;
position: relative;
transform: rotate(10deg);
}
div.one:before,
div.one:after {
height: 96%;
z-index: -10;
position: absolute;
content: "";
left: 8px;
top: 2%;
width: 30%;
max-width: 300px;
background: transparent;
box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.5);
transform: rotate(1.5deg);
}
div.one:after {
transform: rotate(-1.5deg);
right: 8px;
left: auto;
box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.5);
}
<div class="one">
<div class="two">
</div>
</div>
注意:这个答案没有描述如何修复在您的方法中看到的堆叠上下文问题。这只是提供了两个可用于实现类似效果的替代方法。这些方法的优点是应该在IE10+中工作,并且不需要任何额外的元素。
如果不是强制支持IE,我还是会推荐vals的答案。
方法1:透视变换
这几乎与你使用过的那个相似,除了它使用了一个带透视旋转的伪元素来产生阴影。由于只使用了一个伪元素,因此可以使用另一个伪元素在阴影上方添加白色前景。
body {
background: #dddddd;
}
div {
position: relative;
height: 300px;
width: 300px;
padding: 10px;
margin: 40px auto;
transform: rotate(10deg);
}
div:before,
div:after {
position: absolute;
content: '';
top: 0px;
}
div:before {
height: 100%;
width: 100%;
left: 0px;
background: white;
}
div:after {
height: 98%;
width: 97%;
left: 1.5%;
transform-origin: bottom;
transform: perspective(125px) rotateX(1deg);
box-shadow: 10px 0px 10px rgba(0, 0, 0, .5), -10px 0px 10px rgba(0, 0, 0, .5);
z-index: -1;
}
<div></div>
方法二:线性梯度
我们可以使用linear-gradient
背景图像,并适当地放置它们,以产生类似于盒阴影产生的效果。但是正如你在输出中看到的,它并不完全匹配阴影,因为模糊的区域是不一样的。
在这里,我们使用了以下语句:
- 一个小角度线性渐变图像(
to top left
),用于在框的左侧产生阴影。 - 另一个小角度线性渐变图像(
to top right
),用于在框的右侧产生阴影。 - 白色区域的大线性梯度图像(几乎是纯色)。这里使用渐变而不是纯色,因为渐变图像的大小是可以控制的。
body {
background: #dddddd;
}
div {
margin: 40px auto;
height: 300px;
width: 300px;
transform: rotate(10deg);
backface-visibility: hidden;
background: linear-gradient(to right, transparent 0.1%, white 0.1%), linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3) 5%, transparent 50%), linear-gradient(to top right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3) 5%, transparent 50%);
background-size: 280px 100%, 10px 97%, 10px 97%;
background-position: 10px 0px, left top, right top;
background-repeat: no-repeat;
background-origin: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div></div>
渐变的底部仍然没有得到在box-shadow
输出中看到的模糊。如果需要,在一定程度上可以通过添加更多的渐变来实现,如下面的代码片段所示。
body {
background: #dddddd;
}
div {
margin: 40px auto;
height: 300px;
width: 300px;
transform: rotate(10deg);
backface-visibility: hidden;
background: linear-gradient(to right, transparent 0.1%, white 0.1%), linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3) 5%, transparent 50%), linear-gradient(to top right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3) 5%, transparent 50%), linear-gradient(to bottom left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3) 5%, transparent 60%), linear-gradient(to bottom right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3) 5%, transparent 70%);
background-size: 280px 100%, 10px 97%, 10px 97%, 10px 2.5%, 10px 2.5%;
background-position: 10px 0px, left top, right top, left 99.25%, right 99.25%;
background-repeat: no-repeat;
background-origin: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div></div>
当您进入转换世界时,转换本身将解决它们所产生的一些问题。你可以用Z -index的3d等价物来解决这个问题,Z坐标
不幸的是,这在IE中不起作用(我相信直到他们支持保存3d)
body {
background: #dddddd;
}
div {
background: white;
margin: 40px auto;
height: 300px;
width: 300px;
position: relative;
padding: 10px;
transform: translateZ(1px) rotate(10deg);
transform-style: preserve-3d;
}
div:before,
div:after {
height: 96%;
z-index: -10;
position: absolute;
content: "";
left: 8px;
top: 2%;
width: 30%;
max-width: 300px;
background: transparent;
box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.5);
transform: translateZ(-1px) rotate(1.5deg);
}
div:after {
transform: translateZ(-1px) rotate(-1.5deg);
right: 8px;
left: auto;
box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.5);
}
<div></div>