纯 CSS 绘制基本图形(圆、椭圆等)
我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。《CSS 魔法系列》继续给大家带来 CSS 在网页中以及图形绘制中的使用。这篇文章给大家带来的是纯 CSS 绘制基本图形(圆、椭圆等)。
Square
#square { width: 100px; height: 100px; background: red; }
Rectangle
#rectangle { width: 200px; height: 100px; background: red; }
Circle
#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 */
Oval
#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 */
Trapezoid
#trapezoid { border-bottom: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; }
Parallelogram
#parallelogram { width: 150px; height: 100px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); background: red; }
【纯 CSS 绘制基本图形(圆、椭圆等)】相关文章
6. 纯 CSS 绘制各种图形
7. HTML5每日一练之Canvas标签的应用-绘制径向渐变图形
8. HTML5每日一练之Canvas标签的应用-绘制坐标变换图形
9. HTML5每日一练之Canvas标签的应用-绘制线性渐变图形
10. HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer
本文来源:https://www.51html5.com/a984.html
上一篇:CSS3+jQuery的一个丰富多彩时钟
下一篇:css布局九决 学css不再难
﹝纯 CSS 绘制基本图形(圆、椭圆等)﹞相关内容
- JavaScript:40+基本的Web开发工具
- HTML5基本布局
- HTML5 Canvas 起步(1) - 基本概念
- jQuery的工具条提示插件Qtip2的基本使用
- 响应式网页设计的9条基本原则
- CSS3 HTML5实例二(图形化边界)
- 用CSS3绘制新浪微博logo
- CSS3绘制的腾讯QQ企鹅Logo
- [视频]纯CSS3腾讯QQ企鹅(附绘制过程)
- HTML5的互动股票图形数据HumbleFinance