【转】CSS的能力

    关于CSS的使用，相信任何从事前端开发的人都会非常熟悉。但是，对于CSS的细节，你能知道多少呢？比如，border这个属性，通常来说，我们会这样用：border:1px solid red;  这样，一个带有红色的边框就出现了。但是，我们忽略了很多细节，比如transparent这个值，通过它，我们可以做很多事情。比如用一个div来在页面上画一个三角形，怎么画呢？其实，CSS可以让我们搞定这些事情，不多说了，上代码：

 #triangle-up {

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-bottom: 100px solid red;

} 

 相比大家对上面的代码都很明白，但是，当我们放到浏览器下看下，就可以看到一个三角形了。

其实，这个样式巧妙的使用了transparent的这个值，如果我们只用firebug，就可以知道究竟了。

上述代码来自一个网站，里面还有其他的示例，在这里分享给大家：http://css-tricks.com/examples/ShapesOfCSS/