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实现粒子旋转伸缩加载动画
Apr 22 HTML / CSS
利用CSS3实现动态的二级三级菜单效果实例源码
Jan 04 HTML / CSS
CSS3 display知识详解
Nov 25 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
May 09 HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 HTML / CSS
使用phonegap进行本地存储的实现方法
Mar 31 HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 HTML / CSS
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
Jul 01 HTML / CSS
css弧边选项卡的项目实践
May 07 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 inc文件使用的风险和注意事项
2013/11/12 PHP
php获取参数的几种方法总结
2014/02/18 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
vue中axios请求的封装实例代码
2019/03/23 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
微信小程序一周时间表功能实现
2019/10/17 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
python实现每次处理一个字符的三种方法
2014/10/09 Python
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
Python中List.count()方法的使用教程
2015/05/20 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
如何在django中实现分页功能
2020/04/22 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
Python 实现进度条的六种方式
2021/01/06 Python
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
JDO的含义
2012/11/17 面试题
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
师范毕业生个人求职信
2013/12/09 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
企业挂职心得体会
2014/09/10 职场文书
出纳岗位职责范本
2015/03/31 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书