border实现倾斜效果及拓展

对容器border四个方向定义不同的颜色，会得到一种边框倾斜效果，叫做“Slants”。通过边框不同值的组合可以得到各种多彩边框，配合底色的组合得到各种多边形。本例子IE6和FF1.5测试通过。

这是最简单的盒子边框模型。sizes: 120px, 50px, 20px, and 0px squares, 10px borders

50px borders的效果，注意看最后一个只剩下边框。

颜色的混合。

设置边框不同的值，保证左右和上下边框值总和相等。

三角形效果，要求三条border值任意不能一样。

任意多边形组合例子

Referrence
Slants http://www.infimum.dk/HTML/slantinfo.html
slantastic http://www.meyerweb.com/eric/css/edge/slantastic/demo.html

© 一叶千鸟（转载请留原文链接，更新于2009年08月31日0点）

转载时务必以超链接形式标明文章原始出处和作者信息及版权声明。
您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论 ，或者在您自己的网站中 引用(Trackback) 它。