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 制作绽放的莲花采用效果叠加实现
Jan 31 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
html5 application cache遇到的严重问题
Dec 26 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
Jan 07 HTML / CSS
HTML5验证以及日期显示的实现详解
Jul 05 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
May 14 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
Jun 16 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
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
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
ExpressJS入门实例
2015/01/14 Javascript
JavaScript利用正则表达式替换字符串中的内容
2016/12/12 Javascript
js实现密码强度检验
2017/01/15 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
2019/09/24 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
[05:59]2018DOTA2国际邀请赛寻真——只为胜利的Secret
2018/08/13 DOTA
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
一个超级简单的python web程序
2014/09/11 Python
Python操作MySQL简单实现方法
2015/01/26 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
python使用建议技巧分享(三)
2020/08/18 Python
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
比较一下entity bean和session bean
2013/12/27 面试题
2014年小学元旦活动方案
2014/02/12 职场文书
森林防火工作方案
2014/02/14 职场文书
出纳会计岗位职责
2014/03/12 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
工作调动申请报告
2015/05/18 职场文书
抢劫罪辩护词
2015/05/21 职场文书
毕业班工作总结
2015/08/10 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书