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 按钮 利用css3实现超酷下载按钮
Mar 18 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
canvas实现图片马赛克的示例代码
Mar 26 HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
Aug 01 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 HTML / CSS
详解html5 shiv.js和respond.min.js
Jan 24 HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 HTML / CSS
详解HTML5 Canvas标签及基本使用
Jan 10 HTML / CSS
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
Mar 31 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 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
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
Fullpage.js固定导航栏-实现定位导航栏
2016/03/17 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
Python多进程编程技术实例分析
2014/09/16 Python
Python的math模块中的常用数学函数整理
2016/02/04 Python
浅谈Python NLP入门教程
2017/12/25 Python
python实现媒体播放器功能
2018/02/11 Python
人生苦短我用python python如何快速入门?
2018/03/12 Python
python实现维吉尼亚加密法
2019/03/20 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
Python代码需要缩进吗
2020/07/01 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
Python截图并保存的具体实例
2021/01/14 Python
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
NULL是什么,它是怎么定义的
2015/05/09 面试题
嘉宾邀请函
2015/01/31 职场文书
出纳试用期自我评价
2015/03/10 职场文书
MySQL开启事务的方式
2021/06/26 MySQL
alibaba seata服务端具体实现
2022/02/24 Java/Android
Redis分布式锁的7种实现
2022/04/01 Redis