css给容器和图片添加阴影效果

这是一个没有用图片做的阴影效果，它可以应用于任何容器元素，可以通过css设置成任何阴影颜色和阴影位置。

如果是图像，应该给shadowcontainer一个明确的宽度和高度来适合图片。

css代码

<style type="text/css">
<!--
.shiftcontainer2{
position: relative;
left: 5px; /*Number should match -left shadow depth below*/
top: 5px; /*Number should match -top shadow depth below*/
}

.shadowcontainer2{
width: 265px; /* container width*/
background-color: #d1cfd0;
}

.shadowcontainer2 .innerdiv2{
/* Add container height here if desired */
background-color: white;
border: 1px solid gray;
padding: 6px;
position: relative;
left: -5px; /*shadow depth*/
top: -5px; /*shadow depth*/
}
-->
</style>

xhtml

<div class="shiftcontainer2">
<div class="shadowcontainer2">
<div class="innerdiv2" >

Some title<br />
Some text here. Some text here.<br />
Some text here. Some text here.<br />
Some text here. Some text here.<br />
Some text here. Some text here.

</div>
</div>
</div>

您可能会对以下文章感兴趣：

精通CSS-来自Clagnut的阴影方法

精通CSS-洋葱皮阴影

精通CSS-简单的CSS阴影

精通CSS-模糊阴影

精通CSS-山顶角