CSS3 圆角效果


Posted in HTML / CSS onJuly 15, 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 mask遮罩实现一些特效
Oct 24 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
Jun 27 HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 HTML / CSS
CSS巧用渐变实现高级感背景光动画
Dec 06 HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 24 HTML / CSS
CSS3 完美实现圆角效果
Jul 13 #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
You might like
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
ThinkPHP3.0略缩图不能保存到子目录的解决方法
2012/09/30 PHP
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
JavaScript入门学习书籍推荐
2008/06/12 Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
2018/12/18 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
在Django中同时使用多个配置文件的方法
2015/07/22 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
元旦晚会活动总结
2014/07/09 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
自荐信怎么写
2015/03/04 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS