<div>
<ul>
<li><a href=”http://www.jiawin.com” target=”_blank”><img src=”jiawin_1.jpg” _fcksavedurl=””jiawin_1.jpg”” alt=”CSS伪元素before、after妙用：制作时尚焦点图相框” />
<p></p></a></li>
<li><a href=”http://www.jiawin.com” target=”_blank”><img src=”jiawin_2.jpg” alt=”CSS伪元素before、after妙用：制作时尚焦点图相框” />
<p></p></a></li>
<li><a href=”http://www.jiawin.com” target=”_blank”><img src=”jiawin_3.jpg” alt=”CSS伪元素before、after妙用：制作时尚焦点图相框” />
<p></p></a></li>
<li id=”noborder”><a href=”http://www.jiawin.com” target=”_blank”><img src=”jiawin_4.jpg” alt=”CSS伪元素before、after妙用：制作时尚焦点图相框” />
<p></p></a></li>
</ul>
</div>
CSS样式代码
.content {width:788px; margin:auto; height:auto; overflow:hidden; padding:30px; }
.content ul li {float:left; height:176px; border-right:1px solid #DDDDDD; position:relative; padding:10px;}
.focus {background:rgba(250,250,250,0.25); width:174px; height:174px; border:1px dashed #666; position:absolute; left:10px; top:10px; display:none;}
.focus:before {width:174px; height:134px; border-left:1px solid #fff; border-right:1px solid #fff; content:”; position:absolute; left:-1px; top:20px;}
.focus:after {width:134px; height:174px; border-top:1px solid #fff; border-bottom:1px solid #fff; content:”; position:absolute; top:-1px; left:20px;}
.content ul li:hover .focus {display:block;}
#noborder {border-right:0 none;}
通过这个例子是不是很方便的把这个效果做出来了呢？而且看看我们的代码，是不是很简洁呢！哈哈……或许还有更好的方法来实现，我们可以一起探讨。我 个人感觉其实div+css是很好的一门很容易手上但是功能性很强的技术，而且他很好玩很有趣。利用你的奇思妙想， 你可以做出各种意想不到的效果。期待你的作品哦。
