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的rem属性制作响应式页面布局的要点解析
May 24 HTML / CSS
前端面试必备之CSS3的新特性
Sep 05 HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 HTML / CSS
纯CSS3实现的8种Loading动画效果
Jul 05 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
Apr 07 HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
Dec 13 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
Sep 10 HTML / CSS
用HTML5制作烟火效果的教程
May 12 HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 HTML / CSS
HTML5实现音频和视频嵌入的方法
Aug 22 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 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来计算某个目录大小的方法
2014/04/01 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
js加强的经典分页实例
2013/03/15 Javascript
常规表格多表头查询示例
2014/02/21 Javascript
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
Python中str.join()简单用法示例
2018/03/20 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
python爬虫用mongodb的理由
2020/07/28 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
悬挂训练绳:TRX
2017/12/14 全球购物
初中生自我评价
2014/02/01 职场文书
《听鱼说话》教学反思
2014/02/15 职场文书
奠基仪式策划方案
2014/05/15 职场文书
放飞理想主题班会
2015/08/14 职场文书
python控制台打印log输出重复的解决方法
2021/05/14 Python
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python
html中两种获取标签内的值的方法
2022/06/16 jQuery