CSS3教程(2):网页边框半径和网页圆角


Posted in HTML / CSS onApril 02, 2009

页面中圆角的实现是个很头疼的问题,虽然现在有很多种实现方法,但是都是比较麻烦的。在本文中,让我们看看如何使用CSS3 border-radius来实现圆角DIV。
页面中圆角的实现是个很头疼的问题,虽然现在有很多种实现方法,但是都是比较麻烦的。在本文中,让我们看看如何使用CSS3 border-radius来实现圆角DIV。 跨浏览器兼容性
就像在上一篇《CSS3教程:什么是CSS3》中提到的,并不是所有的浏览器支持CSS3,但是那些比较好的浏览器选择兼容,而不是直接支持。我们有两个能使用的前缀。
前缀:
-moz(例如 -moz-border-radius)用于Firefox
-webkit(例如:-webkit-border-radius)用于Safari和Chrome。 CSS3圆角(所有的)
不使用图片来实现圆角曾经是很流行的能力,创建那些完美的小圆角图片,用做适当的CSS背景,是非常费时的工作。现在,使用CSS3,我们可以用几行代码来创建圆角。
CSS3教程(2):网页边框半径和网页圆角
这是一个5px普通边框和15px边框半径的设置:
#roundCorderC{ font-family: Arial; border: 5px solid #dedede; -moz-border-radius: 15px; -webkit-border-radius: 15px; padding: 15px 25px; height: inherit; width: 590px; }
浏览器支持:

  • Firefox(3.05 …)
  • Google Chrome(1.0.154 …)
  • Google Chrome(2.0.156 …)
  • Internet Explorer(IE7, IE8)
  • Opera 9.6
  • Safari(3.2.1 windows) CSS3圆角(个别的)
    当然,一个DIV的四个角不需要全部都是圆角,你可以个别的实现圆角。
    CSS3教程(2):网页边框半径和网页圆角
    #roundCornerI{ font-family: Arial; border: 5px solid #dedede; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 0px; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -webkit-border-bottom-right-radius: 15px; padding: 15x 25px; height: inherit; width: 590px; }
    浏览器支持:
    • Firefox(3.05 …)
    • Google Chrome(1.0.154 …)
    • Google Chrome(2.0.156 …)
    • Internet Explorer(IE7, IE8)
    • Opera 9.6
    • Safari(3.2.1 windows)
HTML / CSS 相关文章推荐
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
May 07 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
css3 中translate和transition的使用方法
Mar 26 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 HTML / CSS
HTML5文档结构标签
Apr 21 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
May 29 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
Jul 02 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
May 15 HTML / CSS
浅谈css实现背景颜色半透明的两种方法
Dec 06 HTML / CSS
CSS3教程(3):border-color网页边框色彩
Apr 02 #HTML / CSS
CSS3教程(4):网页边框和网页文字阴影
Apr 02 #HTML / CSS
CSS3教程(5):网页背景图片
Apr 02 #HTML / CSS
CSS3教程(7):CSS3嵌入字体
Apr 02 #HTML / CSS
CSS3教程(6):创建网站多列
Apr 02 #HTML / CSS
CSS3教程(8):CSS3透明度指南
Apr 02 #HTML / CSS
CSS3教程(10):CSS3 HSL声明设置颜色
Apr 02 #HTML / CSS
You might like
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
Python中按键来获取指定的值
2019/03/02 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
python中的itertools的使用详解
2020/01/13 Python
python3 字符串知识点学习笔记
2020/02/08 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
大学生求职简历的自我评价
2013/10/21 职场文书
物流管理专业职业生涯规划书
2014/01/06 职场文书
初中班主任寄语
2014/04/04 职场文书
机关搬迁方案
2014/05/18 职场文书
党员对照检查材料思想汇报
2014/09/16 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python
python多次执行绘制条形图
2022/04/20 Python