CSS3 完美实现圆角效果


Posted in HTML / CSS onJuly 13, 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.0新属性效果在ie下的解决方案
May 10 HTML / CSS
css3 background属性调整增强介绍
Dec 18 HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
Mar 01 HTML / CSS
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
Apr 26 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
Sep 06 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 HTML / CSS
原生CSS实现文字无限轮播的通用方法
Mar 30 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
介绍CSS3使用技巧5个
Apr 02 #HTML / CSS
You might like
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
php中变量及部分适用方法
2008/03/27 PHP
PHP开发框架总结收藏
2008/04/24 PHP
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
用js做一个小游戏平台 (一)
2009/12/29 Javascript
JS字符串函数扩展代码
2011/09/13 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
Python GUI Tkinter简单实现个性签名设计
2018/06/19 Python
django中使用POST方法获取POST数据
2019/08/20 Python
python 连续不等式语法糖实例
2020/04/15 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
澳大利亚时尚前卫设计师珠宝在线:Amber Sceats
2017/10/04 全球购物
一个C/C++编程面试题
2013/11/10 面试题
中专自我鉴定
2014/02/05 职场文书
初中学习计划书范文
2014/09/15 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
个人向公司借款协议书
2016/03/19 职场文书
Python Django ORM连表正反操作技巧
2021/06/13 Python