|
[tr][td] 我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活，只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用，更多新奇的 CSS 作品涌现出来。《CSS 魔法系列》继续给大家带来 CSS 在网页中以及图形绘制中的使用。这篇文章给大家带来的是纯 CSS 绘制基本图形（圆、椭圆等）。
Square [size=3]#square { width: 100px; height: 100px; background: red;
}
[/size]Rectangle [size=3]#rectangle { width: 200px; height: 100px; background: red;
}
[/size]Circle [size=3]#circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;
}
/* Cleaner, but slightly less support: use "50%" as value */
[/size]Oval [size=3]#oval { width: 200px; height: 100px; background: red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px;
}
/* Cleaner, but slightly less support: use "50%" as value */
[/size]Trapezoid [size=3]#trapezoid { border-bottom: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px;
}
[/size]Parallelogram [size=3]#parallelogram { width: 150px; height: 100px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); background: red;
}
[/size][/td][/tr] |
|
