重要的是其实现的原理，明白原理后就可以自由的发挥你的想象了，不用多说，直接上代码：
[img]http://image.zhangxinxu.com/image/blog/201005/2010-05-05_153414.png[/img]
参考：
[url]http://kevinpeng.iteye.com/blog/1062391[/url]
[url]http://www.zhangxinxu.com/wordpress/2010/05/css-border%E4%B8%89%E8%A7%92%E3%80%81%E5%9C%86%E8%A7%92%E5%9B%BE%E5%BD%A2%E7%94%9F%E6%88%90%E6%8A%80%E6%9C%AF%E7%AE%80%E4%BB%8B/[/url]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
.clip-top{
border-style: dashed dashed solid dashed;
border-color: transparent transparent red transparent ;
border-width: 4px;
width:200px;
height:200px;
}
.clip-bot{
border-style: solid dashed dashed;
border-color: red transparent transparent;
border-width: 4px;
width:200px;
height:200px;
}
.clip-center{
background-color: red;
width:208px; //此出宽度：内容宽度＋2＊border宽度
height:210px;
}
</style>
</head>
<body>
<div class="container">
<div class="clip-top"></div>
<div class="clip-center"></div>
<div class="clip-bot"></div>
</div>
</body>
</html>[img]http://image.zhangxinxu.com/image/blog/201005/2010-05-05_153414.png[/img]
参考：
[url]http://kevinpeng.iteye.com/blog/1062391[/url]
[url]http://www.zhangxinxu.com/wordpress/2010/05/css-border%E4%B8%89%E8%A7%92%E3%80%81%E5%9C%86%E8%A7%92%E5%9B%BE%E5%BD%A2%E7%94%9F%E6%88%90%E6%8A%80%E6%9C%AF%E7%AE%80%E4%BB%8B/[/url]
484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
