如何用CSS实现DIV块的阴影效果

html-css064

如何用CSS实现DIV块的阴影效果,第1张

可以用CSS3的阴影属性。 不过要支持IE6的话，加载个 .htc 行为文件就好了。border: 1px solid #696padding: 60px 0text-align: centerwidth: 200px-webkit-box-shadow: #666 0px 0px 10px-moz-box-shadow: #666 0px 0px 10pxbox-shadow: #666 0px 0px 10pxbackground: #EEFF99behavior: url(/PIE.htc)。\x0d\x0a直接使用box-shadow:5px 5px 10px black inset属性设置样式样式就可以了。前两个值（5px 5px）是水平和垂直方向的偏移量，正值阴影就会向左向下偏移，负值反之；第三个值（10px）是设置模糊距离；black就是阴影的颜色啦；最后一个inset是在元素内部创建一个阴影，也就是内阴影了；删除掉inset就是设置外阴影了。\x0d\x0a这是使用纯CSS实现的效果，在DIV层的区域边框添加阴影效果，看上去非常形象，但是实现起来并不是太难，CSS代码比较简洁，值得我们学习。盒子阴影的CSS实现方法

不需要CSS3+HTML5，用AJAX+DIV+CSS就可以了。

利用AJAX取得未读数据的数量，把DIV的innerHTML设为该数量就行了，另外这是一个DIV(或则其他块元素)中嵌入的一个相对定位层。所以没必要去使用CSS3和HTML5,毕竟国内主要浏览器都不支持。现在支持CSS3和HTML5的浏览器就只有最新的浏览器(如IE9、opera、safari、FF等等)

<div>

<strong>快速导航</strong>

<ul>

<li><a><img src="1.jpg" /></a></li>

<li><a><img src="2.jpg" /></a></li>

.....

</ul>

<a>更多>></a>

</div>

1.外面div设宽度、边框、相对定位

2.里面strong给背景图

3.ul里面的li全部浮动，设外边距

4.更多>> 绝对定位，定位到大div的右上角

实现时你主要会遇到下面几个问题：

ie双倍浮动边

最后一个li有外边距，浮动时div宽度不够会被挤到下一行

各种依靠内外、边距调整各元素位置

有可能产生错误的外边距自动合并

自己动手，不要找人要代码，就按我上面的思路自己做，弄懂了你就长进了一大截，直接给你代码你永远学不好。