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中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 HTML / CSS
CSS3自定义滚动条样式的示例代码
Aug 21 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
Jan 25 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
Nov 15 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 HTML / CSS
html5+实现plus.io进行拍照和图片等获取
Jun 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关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
php实现文件上传基本验证
2020/03/04 PHP
jquery.validate使用攻略 第二部
2010/07/01 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
Python中property函数用法实例分析
2018/06/04 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
Python3并发写文件与Python对比
2019/11/20 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
Python 高效编程技巧分享
2020/09/10 Python
全球性的女装店:storets
2019/06/12 全球购物
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
2014年节能工作总结
2014/12/18 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
家长会主持词开场白
2015/05/29 职场文书
教师节校长致辞
2015/07/31 职场文书
2016年感恩节寄语
2015/12/07 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书