用CSS3.0画圆
2014-04-15 11:43
387 查看
CSS3.0中有一个border-radius属性,这个属性允许向 div 元素添加圆角边框,也就是div边角不再一直是直角,在CSS3.0中可以做成圆角了,所以我们可以用这个属性用div画一个圆,或者同心圆。
圆 代码:
<div style="width:100px; height:100px; border-radius:100px; background-color:#eeeef4;"></div>
同心圆代码:
<div style="width:200px; height:200px; background-color:#FF9; border-radius:200px; ">
<div style="width:100px; height:100px; position:relative; top:25%; left:25%; border-radius:200px; background-color:#fff;"></div>
</div>
圆 代码:
<div style="width:100px; height:100px; border-radius:100px; background-color:#eeeef4;"></div>
同心圆代码:
<div style="width:200px; height:200px; background-color:#FF9; border-radius:200px; ">
<div style="width:100px; height:100px; position:relative; top:25%; left:25%; border-radius:200px; background-color:#fff;"></div>
</div>
相关文章推荐
- CSS3.0中文手册及相关资源
- css3.0的线性渐变
- win7中VS2010中安装CSS3.0问题解决方法
- CSS3.0盒模型display:-webkit-box;的使用
- css3.0新增属性
- 8、localstorage的应用 - HTML5&CSS3.0基础部分-xyphf
- html css常见问题经验总结 源于css3.0 API
- Css3.0 笔记
- Html5+Css3.0帮助文档
- CSS3.0各种炫美特效(集合)
- css3.0动画属性
- CSS3.0盒模型display:-webkit-box;的使用
- H5+CSS3.0常见bug及解决方案
- 9、class获取、添加删除状态切换 - HTML5&CSS3.0基础部分-xyphf
- CSS3.0背景图片
- css3.0实现的各种形状
- 兼容css3.0中的box-shadow
- css3.0 3d动画demo
- css3.0线性渐变