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 相关文章推荐
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 HTML / CSS
使用css3和jquery实现可伸缩搜索框
Feb 12 HTML / CSS
css3动画效果小结(推荐)
Jul 25 HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
May 04 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
Apr 24 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 HTML / CSS
HTML5 localStorage使用总结
Feb 22 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 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中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
PHP中include与require使用方法区别详解
2013/10/19 PHP
学习php设计模式 php实现命令模式(command)
2015/12/08 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
phpstorm最新激活码分享亲测phpstorm2020.2.3版可用
2020/11/22 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
jquery 页面全选框实践代码
2010/04/02 Javascript
javascript中强制执行toString()具体实现
2013/04/27 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
KMP算法精解及其Python版的代码示例
2016/06/01 Python
python计算auc指标实例
2017/07/13 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
对Python的多进程锁的使用方法详解
2019/02/18 Python
Python-接口开发入门解析
2019/08/01 Python
Python使用scrapy爬取阳光热线问政平台过程解析
2019/08/14 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
大学生大二自我鉴定
2013/10/28 职场文书
八年级物理教学反思
2014/01/19 职场文书
优秀经理事迹材料
2014/02/01 职场文书
爸爸的花儿落了教学反思
2014/02/20 职场文书
硕士生工作推荐信
2014/03/07 职场文书
学校社会实践活动总结
2014/07/03 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
刑事法律意见书
2015/06/04 职场文书