CSS居然可以这样用

睡觉前，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>