|
|
重要的是其实现的原理，明白原理后就可以自由的发挥你的想象了，不用多说，直接上代码：
<!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>
参考：
http://kevinpeng.iteye.com/blog/1062391
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/ |
|
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡