CSS3 圆角矩形的使用
2012-04-15 14:31
246 查看
在 CSS3 中,可以用 border-radius 属性实现圆角矩形。最简单的例子如下:
如果将 border-radius 的值设为一个正方形边长的一半,就得到一个圆形:
实际上, 圆角矩形四个角的圆弧半径可以不一样,我们可以用 border-top-left-radius,border-top-right-radius,border-bottom-left-radius 和 border-bottom-right-radius 属性分别设置四个角的值。
另外,四个角也可以设置为椭圆弧形状,例如:
这个 border-radius 属性只有 Firefox 4.0,Chrome 4.0,Safari 5.0,Opera 11.50 和 IE 9.0 开始的浏览器才支持。旧的 Firefox 支持 -moz-border-radius 属性,而旧的 Chrome 和 Safari 浏览器支持 -webkit-border-radius 属性。
参考资料:
[1] CSS Backgrounds and Borders Module Level 3
[2] border-radius - MDN
[3] CSS3 的圆角 Border-radius
width: 200px; height: 100px; border-radius: 20px; border: 1px solid;
如果将 border-radius 的值设为一个正方形边长的一半,就得到一个圆形:
width: 160px; height: 160px; border-radius: 80px; border: 1px solid;
实际上, 圆角矩形四个角的圆弧半径可以不一样,我们可以用 border-top-left-radius,border-top-right-radius,border-bottom-left-radius 和 border-bottom-right-radius 属性分别设置四个角的值。
另外,四个角也可以设置为椭圆弧形状,例如:
width: 200px; height: 100px; border-radius: 40px / 20px; border: 1px solid;
这个 border-radius 属性只有 Firefox 4.0,Chrome 4.0,Safari 5.0,Opera 11.50 和 IE 9.0 开始的浏览器才支持。旧的 Firefox 支持 -moz-border-radius 属性,而旧的 Chrome 和 Safari 浏览器支持 -webkit-border-radius 属性。
参考资料:
[1] CSS Backgrounds and Borders Module Level 3
[2] border-radius - MDN
[3] CSS3 的圆角 Border-radius
相关文章推荐
- 详解使用CSS3绘制矩形、圆角矩形、圆形、椭圆形、三角形、弧
- 详解使用CSS3绘制矩形、圆角矩形、圆形、椭圆形、三角形、弧
- 使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
- Android shape的使用(圆角矩形)
- CSS3绘制圆角矩形的简单示例
- 使用 CSS3 制作圆角按钮,无需图片
- android使用官方v4裁剪圆角和圆角矩形
- android 使用java编程实现圆角渐变矩形的绘制
- 圆角矩形“RoundRectShape”使用详解
- Android 使用ShapeDrawable制作圆角矩形
- java在线聊天项目 使用SWT快速制作登录窗口,可视化窗口Design 更换窗口默认皮肤(切换Swing自带的几种皮肤如矩形带圆角)
- CSS3 创建圆角边框及矩形添加阴影
- android 使用shape自定义圆角矩形
- 无需图片,使用CSS3实现圆角按钮[转]
- 圆角矩形“RoundRectShape”使用详解
- CSS3学习笔记1-圆角矩形
- Canvas使用 -- 在canvas上绘制圆角矩形并添加文字
- Android 中shape的使用(圆角矩形)
- 【坑】【未解答】使用canvas中的arcTo绘制圆角矩形遇到的问题