css – 做这种投影的最佳方法是什么?

前端之家收集整理的这篇文章主要介绍了css – 做这种投影的最佳方法是什么?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个网站将有一列图像和div(两者的混合),总是相同的大小.

在所有这些我想添加某种投影(如此处所示):

我曾经使用CSS投影,但我从来没有在CSS中看到过这样的人.这可以在CSS中完成吗?假设它不能,那么我猜我只会使用阴影切片作为图形,可能是背景.如果这是唯一的路线,我该如何将其应用于每个图像或div?

现在我正在做的是在每个图像或div下面放一个div:

@H_301_8@<div class="rightimgdropshadow">&nbsp;</div>

…并在CSS中执行此操作:
.rightimgdropshadow

@H_301_8@{ background-image: url(../images/site-structure/right-col-image-shadow.jpg); background-repeat: no-repeat; background-position: center top; width 100% height: 20px; }

有一个更好的方法吗?谢谢!

解决方法

如果您更喜欢使用CSS来创建该类型的阴影,则可以将CSS3用作 seen here!

CSS

@H_301_8@/* Lifted corners */ .lifted { -moz-border-radius:4px; border-radius:4px; } .lifted:before,.lifted:after { bottom:15px; left:10px; width:50%; height:20%; max-width:300px; -webkit-Box-shadow:0 15px 10px rgba(0,0.7); -moz-Box-shadow:0 15px 10px rgba(0,0.7); Box-shadow:0 15px 10px rgba(0,0.7); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -ms-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); } .lifted:after { right:10px; left:auto; -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -ms-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); }

Made a Fiddle!

猜你在找的CSS相关文章