首页 > css, 网页设计 > 另辟蹊径，用css制作简单图片阴影效果

另辟蹊径，用css制作简单图片阴影效果

2009年8月4日 雨无形 发表评论 阅读评论

一般制作阴影效果都是使用的图片背景或者css滤镜，个人对于CSS滤镜一直抱有抵触心理，所以能不用就不用，有时候为了实现一些效果需要给图片加上阴影。可以尝试一下以下CSS方法。

a.shadow {
	display:inline-block;
	padding:1px;
	background:#d1d1d1;/* 第三层边框的颜色 */
	border:solid #f0f0f0 1px;/* 第四层边框的颜色 */
	/* 各标准浏览器中圆角定义 */
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
a.shadow img {
	padding:1px;
	background:#676767;/* 第一层边框的颜色 */
	border:solid #a4a4a4 1px;/* 第二层边框的颜色 */
	/* 各标准浏览器中圆角定义 */
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

提示：你可以先修改部分代码再运行。

分类: css, 网页设计 标签:
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.