小李刀刀博客

睡觉前，NT给我发了两个网址，是老外的，那个家伙暴强，居然用纯CSS在页面上画出房子来，平面的、3D的，都画出来了。

看了一下他的CSS代码，一开始以为是这样用：

.class{
    width:100px;
    width:60px;
    height:200px;
    height:160px;
}

后来发现其实一些特殊图形的绘制跟上面的这个怪异的用法没关系，而是用边框来实现的，比如：

　　这三个形状除了Div，没有任何其它的元素或者文本，更不用说图形了。这是充分利用了border的显示特性。因为当我们同时设置四个方向的border时，浏览器自动会把交叉的部分叠加或者相互剪除。当border足够大的时候，我们就看到了上面这样的特殊效果。谁能想象到这是4个200像素的边框形成的效果呢？

代码如下：

 <div style="BORDER-RIGHT: #ff0 50px ridge; BORDER-TOP: #f00 50px ridge; FLOAT: left; MARGIN: 10px; BORDER-LEFT: #0f0 50px ridge; WIDTH: 1px; BORDER-BOTTOM: #00f 50px ridge; HEIGHT: 1px">&nbsp;</div>
<div style="BORDER-RIGHT: #ff0 50px groove; BORDER-TOP: #f00 50px groove; FLOAT: left; MARGIN: 10px; BORDER-LEFT: #0f0 50px groove; WIDTH: 1px; BORDER-BOTTOM: #00f 50px groove; HEIGHT: 1px">&nbsp;</div>
<div style="BORDER-RIGHT: #ff0 50px double; BORDER-TOP: #f00 50px double; FLOAT: left; MARGIN: 10px; BORDER-LEFT: #0f0 50px double; WIDTH: 1px; BORDER-BOTTOM: #00f 50px double; HEIGHT: 1px">&nbsp;</div>

本文基于署名 2.5 中国大陆许可协议发布，欢迎转载，演绎或用于商业目的，但是必须保留本文的署名小李刀刀（包含链接）。如您有任何疑问或者授权方面的协商，请给我发送邮件。