最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
可以用CSS为图片加阴影吗?
时间:2008-01-11 编辑:简简单单 来源:一聚教程网
在网页中插入图片是再平常不过的事情了,但更多的时候为了美观的需要,我们要给图片加上阴影,图片数量较多的时候,工作量是非常大的。重复劳动而且没有工作效果。我们有没有办法用CSS给图片加阴影呢?
CSS中有一个概念大家应该都不陌生,那就是相对定位position:relative; 。我们应该学会灵活的运用CSS所提供的属性。给图片加阴影我们就可以用position:relative; 相对定位的办法来实现。关于position属性可以参考这里。
我们看下面的css代码:
代码如下 | 复制代码 |
.waiwei { position:relative; background:#eee; margin:0 auto; width:200px; } .tupian { background:#fff; border:1px solid #c00; padding:0; position:relative; top:-5px; left:-5px; } .tupian img { vertical-align:bottom; /*去除图片下方的空隙*/ } |
我们在XHTML中插入图片,以下是XHTML代码:
代码如下 | 复制代码 |
|
这个问题中的CSS和XHTML我们都应该能看明白,原理也非常清晰。就是利用了相对定位,将图片定位与容器错开并填表充色彩,最终形成了阴影的效果。
至此,这一效果顺利的完成了。什么?不够美观?应该还可以做的更精致些?这些工作就交给追求完美的你去完成了。
-
上一个: 不用float实现div模块居中布局
相关文章
- 用CSS实现各种图片滤镜效果演示 12-26
- CSS 阴影效果(无需图片即可实现) 02-08
- CSS去掉图片img边框及如何防止图片撑破DIV 01-05
- CSS Sprites图片不清晰的问题(2倍的 CSS Sprites 如何缩放) 12-16
- css中input标签与图片按钮对不齐解决方法 06-10
- css实现圆角三角形例子(无图片) 03-26