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 object-fit属性
Jul 27 HTML / CSS
css3实现小箭头各种图形效果
Jul 08 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
HTML5单页面手势滑屏切换原理
Mar 21 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
Dec 20 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
配置H5的滚动条样式的示例代码
Mar 09 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
Aug 01 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
Feb 03 HTML / CSS
html输入两个数实现加减乘除功能
Jul 01 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
使用PHP维护文件系统
2006/10/09 PHP
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
php实现利用phpexcel导出数据
2013/08/24 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
Python实现聊天机器人的示例代码
2018/07/09 Python
python使用knn实现特征向量分类
2018/12/26 Python
Python绘制热力图示例
2019/09/27 Python
wxpython+pymysql实现用户登陆功能
2019/11/19 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
行政经理的岗位职责
2013/11/23 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
小学生校园广播稿
2014/09/28 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
监守自盗观后感
2015/06/10 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
Python开发简易五子棋小游戏
2022/05/02 Python