css 画圆,环形,椭圆
2016-03-14 18:33
656 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .circle1{ width: 200px; height: 200px; background-color: blue; border-radius: 50%; } .circle2{ width: 200px; height: 200px; background-color: blue; border-radius: 50%; border: 50px solid red; } .circle3{ width: 200px; height: 300px; background-color: red; border-radius: 50%; } </style> </head> <body> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> </body> </html>
只要border-radius: 50%; 就可以画圆,
环形,只是加一个 border: 50px solid red;
椭圆怎么画呢?
定义矩形的宽高的时候,定义成不一样就行啦
相关文章推荐
- css画三角形
- css 画矩形
- css样式
- CSS模块化基本思想
- 自定义RatingBar显示的样式
- css3 box-sizing属性
- CSS2【3】-- Positioning
- 一步步教大家编写酷炫的导航栏js+css实现
- [DIV/CSS] 用CSS和JS打造一个简单的图片编辑器
- 谈谈css王朝的px,em,rem之间的那些事儿
- iOS - 同一个Label的不同样式显示
- [DIV/CSS] 【译】下一代选择器:CSS4
- 自定义 <input type="file" /> 样式
- CSS3:布局
- 2016.3.14__CSS 浮动__第五天
- 手链样式( 使用全排列函数next_permutation)
- Sass mixin 使用css border属性画三角形
- dispaly:table布局
- 2016.3.14__CSS 盒模型_第四天
- css3中-moz、-ms、-webkit分别代表的意思