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 简写animation
May 10 HTML / CSS
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
Dec 28 HTML / CSS
css3发光搜索表单分享
Apr 11 HTML / CSS
CSS3动画效果回调处理详解
Dec 10 HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
Nov 15 HTML / CSS
详解CSS3中nth-child与nth-of-type的区别
Jan 05 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 HTML / CSS
HTML5实现音频和视频嵌入的方法
Aug 22 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
Jun 03 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中的正则表达式函数介绍
2012/02/27 PHP
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
PHP随机数 C扩展随机数
2016/05/04 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
2014/06/23 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
Python循环语句之break与continue的用法
2015/10/14 Python
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
python+pyqt实现12306图片验证效果
2017/10/25 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
Skyscanner波兰:廉价航班
2017/11/07 全球购物
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
六十大寿答谢词
2014/01/12 职场文书
心得体会格式及范文
2016/01/25 职场文书