CSS3 完美实现圆角效果


Posted in HTML / CSS onJuly 13, 2009

 现在使用CSS3 技术不需要图片即可实现圆角,把侧边栏标题背景的圆角效果和搜索框的圆角效果用 CSS3 实现。记录一下以便以后使用。W3C 很早就制订了实现了 CSS 圆角的 CSS3 属性:border-radius,Firefox 和 Safari 也通过私有属性实现了该功能:

Firefox 和 Safari 实现圆角

    效果如下:

CSS3 完美实现圆角效果

    其中 -moz-border-radius 是 Firefox 实现圆角的私有属性,而 -webkit-border-radius 是 webkit 内核浏览器(如 Safari 和 Chrome)实现圆角的私有属性,如果你只要指定某一个角是圆角的话,它们都分别定义了四个属性:

-moz-border-radius-topleft / -webkit-border-top-left-radius-moz-border-radius-topright / -webkit-border-top-right-radius-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

    当然 IE (包括 IE8)还是不支持,所以该效果只能在 Firefox, Safari, 以及 Chrome 中查看。

HTML / CSS 相关文章推荐
CSS3 Columns分列式布局方法简介
May 03 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
May 10 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
Aug 06 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
用html5绘制折线图的实例代码
Mar 25 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
html5.2 dialog简介详解
Feb 27 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
Jul 18 HTML / CSS
几款流行的HTML5 UI框架比较(小结)
Apr 08 HTML / CSS
CSS3 box-sizing属性
Apr 17 #HTML / CSS
CSS3伪类选择器:nth-child()
Apr 02 #HTML / CSS
CSS3教程:新增加的结构伪类
Apr 02 #HTML / CSS
CSS3五个技巧给你的网站带来出色的效果
Apr 02 #HTML / CSS
CSS3教程:边框属性border的极致应用
Apr 02 #HTML / CSS
CSS3中的5个有趣的新技术
Apr 02 #HTML / CSS
介绍CSS3使用技巧5个
Apr 02 #HTML / CSS
You might like
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
关于crontab的使用详解
2013/06/24 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
PHP中Laravel 关联查询返回错误id的解决方法
2017/04/01 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
js异步加载的三种解决方案
2013/03/04 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
测试驱动开发的主要步骤是什么
2014/12/10 面试题
四种会话跟踪技术
2015/05/20 面试题
写给女生的道歉信
2014/01/08 职场文书
就职演讲稿范文
2014/05/19 职场文书
出纳岗位职责范本
2015/03/31 职场文书
换届选举主持词
2015/07/03 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
MySQL之DML语言
2021/04/05 MySQL
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android