给一个图片加上CSS边框特效

这段代码适合给CSS新手朋友看,有助于理解CSS中border属性的应用,这种实现效果实际上是给内层的IMG标签设置border属性,然后在外层包围的A标签同样设置一个border边框属性,将其宽度设置宽一点,比较简单的效果。

示例代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>图片边框</title>
<style type=”text/css”>
a{border:solid 3px #999;display:inline-block;padding:2px;}
img{border:solid 1px #aaa;display:block;padding:5px;}
</style>
</head>
<body>
<a href=”/”><img src=”http://www.codefans.net/jscss/demoimg/wall_s7.jpg” /></a>
</body>
</html>

关于作者

杰夫(jerfo0)

杰夫(jerfo0)

一个活的真实,耿直的boy。
坚定相信爱情,向往自由,对世界充满好奇心。热爱美剧、海贼王、一切户外运动、旅行...
职业:互联网运营。
生命不息,折腾不止,燥起来!!

查看全部帖子

发表评论

电子邮件地址不会被公开。 必填项已用*标注