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 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
CSS3轻松实现清新 Loading 效果的简单实例
Jun 06 HTML / CSS
CSS3教程:background-clip和background-origin
Oct 17 HTML / CSS
CSS3 简单又实用的5个属性
Mar 04 HTML / CSS
css3 自定义字体font-face使用介绍
May 14 HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
Mar 16 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 HTML / CSS
详解Html5微信支付爬坑之路
Jul 24 HTML / CSS
canvas烟花特效锦集
Jan 17 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
使用canvas对video视频某一刻截图功能
Sep 25 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 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
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
杏林同学录(五)
2006/10/09 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
js 实现菜单上下显示附效果图
2013/11/21 Javascript
JS遍历页面所有对象属性及实现方法
2016/08/01 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
python文件和目录操作函数小结
2014/07/11 Python
python回调函数用法实例分析
2015/05/09 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
Python生成器定义与简单用法实例分析
2018/04/30 Python
python 制作自定义包并安装到系统目录的方法
2018/10/27 Python
python 设置输出图像的像素大小方法
2019/07/04 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
Python 实现数组相减示例
2019/12/27 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
师范应届生语文教师求职信
2013/10/29 职场文书
服装设计专业自荐书范文
2013/12/30 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
党员个人剖析材料
2014/09/30 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
干部培训简讯
2015/07/20 职场文书
Python编写冷笑话生成器
2022/04/20 Python
排查Tomcat进程假死的问题
2022/05/06 Servers
利用Redis实现点赞功能的示例代码
2022/06/28 Redis