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实现的windows8开机加载动画
Dec 09 HTML / CSS
css3实现3d旋转动画特效
Mar 10 HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 HTML / CSS
详解CSS3中border-image的使用
Jul 18 HTML / CSS
CSS3中新增的对文本和字体的设置
Feb 03 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
Jul 10 HTML / CSS
移动端html5 meta标签的神奇功效
Jan 06 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 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
PHP5 的对象赋值机制介绍
2011/08/02 PHP
php中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
[原创]php逐行读取txt文件写入数组的方法
2015/07/02 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
Javascript 陷阱 window全局对象
2008/11/26 Javascript
JavaScript 常用函数库详解
2009/10/21 Javascript
jQuery 常见学习网站与参考书
2009/11/09 Javascript
自己做的模拟模态对话框实现代码
2012/05/23 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
使用SAE部署Python运行环境的教程
2015/05/05 Python
Python实现调度算法代码详解
2017/12/01 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
详解python中的模块及包导入
2019/08/30 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
html5简介及新增功能介绍
2020/05/18 HTML / CSS
为什么要有struct关键字
2012/05/08 面试题
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
改进作风怎么办发言材料
2014/08/17 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
校长师德表现自我评价
2015/03/05 职场文书
教学督导岗位职责
2015/04/10 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
Python标准库之typing的用法(类型标注)
2021/06/02 Python
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers
golang生成vcf通讯录格式文件详情
2022/03/25 Golang
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏