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 相关文章推荐
CSS3的Border-radius轻松制作圆角
Dec 24 HTML / CSS
使用css3制作动感导航条示例
Jan 26 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 HTML / CSS
CSS3中伪元素::before和::after的用法示例
Sep 18 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
Mar 28 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
Apr 08 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 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
支持oicq头像的留言簿(二)
2006/10/09 PHP
PHP数组内存耗用太多问题的解决方法
2010/04/05 PHP
延长phpmyadmin登录时间的方法
2011/02/06 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
php远程下载类分享
2016/04/13 PHP
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
python简单实例训练(21~30)
2017/11/15 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
python实现中文文本分句的例子
2019/07/15 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
4行Python代码生成图像验证码(2种)
2020/04/07 Python
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
学生爱国演讲稿
2014/01/14 职场文书
《假如》教学反思
2014/04/17 职场文书
乳制品整治工作方案
2014/05/29 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
信用卡工资证明范本
2015/06/19 职场文书
防震减灾主题班会
2015/08/14 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python
SQL注入详解及防范方法
2021/12/06 MySQL
 Python 中 logging 模块使用详情
2022/03/03 Python
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python