纯CSS3实现圆角效果(含IE兼容解决方法)


Posted in HTML / CSS onMay 07, 2014

如今,这种利用CSS制作圆角的技术已经得到了大多数主流浏览器的支持,包括Safari,谷歌浏览器,IE,Opera和火狐浏览器。下面让我们来看看border-radius的语法,解释,以及IE是如何支持它的。

纯CSS3实现圆角效果(含IE兼容解决方法)

语法和说明

在CSS3中用来生成圆角效果的属性是border-radius.这个属性跟大家熟知的width等属性的用法相似:

复制代码
代码如下:

.roundElement {
border-radius: 10px;
}

上面的这句代码的作用是设置一个元素的四个角的弧度半径值都为10px。你也可以对每个角单独指定:
复制代码
代码如下:

.pearElement {
border-top-left-radius: 7px;
border-top-right-radius: 5px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 8px;
}

如果你觉得上面的写法太复杂,可以使用下面border-radius简写的方法:
复制代码
代码如下:

.oddRoundElement {
border-radius: 12px 5px 12px 5px;
/* or */
border-radius: 12px 5px;
}

四个值分别代表的是top-left, top-right, bottom-right, bottom-left四个角。

各浏览器对border-radius的支持

因为这种圆角技术是CSS3里出现的,老式浏览器或较早期的浏览器中用到这个属性时需要在CSS里添加浏览器引擎前缀(vendor prefixes)。会是{prefix}-border-radius这样一个样子,而具体各种浏览器引擎前缀是下面这样的写法:

复制代码
代码如下:

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;</p> <p>/* 火狐浏览器 */
-moz-border-radius-topleft:15px; /* top left corner */
-moz-border-radius-topright:50px; /* top right corner */
-moz-border-radius-bottomleft:15px; /* bottom left corner */
-moz-border-radius-bottomright:50px; /* bottom right corner */
-moz-border-radius:10px 15px 15px 10px; /* shorthand topleft topright bottomright bottomleft */</p> <p>/* webkit引擎的浏览器 */
-webkit-border-top-left-radius:15px; /* top left corner */
-webkit-border-top-right-radius:50px; /* top right corner */
-webkit-border-bottom-left-radius:15px; /* bottom left corner */
-webkit-border-bottom-right-radius:50px; /* bottom right corner */

基本上,你需要对每种浏览器引擎做各自的声明,加上这些讨厌的稍微不同的代码来保证完全支持border-radius。但是,如果你使用的是最新版的浏览器,包括火狐、谷歌、IE等,你不需要使用这些前缀,因为这个技术已经很成熟,在各种最新版的浏览器里已经受到了普遍支持。

让IE支持border-radius

直到IE9才有对border-radius属性的支持,相信很多Web开发人员和Web应用设计人员都很沮丧。在IE9里,最重要的一个点是使用edge META 标记:

复制代码
代码如下:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
border-top-right-radius: 7px;
border-top-left-radius: 7px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
</style>

如果你的IE比较老,不支持border-radius,有很多其它的技术可以弥补这个缺陷,我遇到过的最好的一个解决方法是使用一个很小的JavaScript程序包,叫做CurvyCorners。这个CurvyCorners用javaScript动态的生成很多div标记,用这些div标记来绘出圆角效果,甚至支持消除锯齿功能。

CurvyCorners的用法很简单。第一步是在页面中引入CurvyCorners.js脚本:

复制代码
代码如下:

<!-- SIMPLY INCLUDE THE JS FILE! -->
<script type="text/javascript" src="curvy.corners.trunk.js">
</script>

CurvyCorners会在DOM元素里寻找具有border-radius属性的元素,然后依次给它们制作出圆角效果。不需要辅助图片。你甚至可以设置指定元素的弧度半径:
复制代码
代码如下:

var settings = {
tl: { radius: 12 },
tr: { radius: 12 },
bl: { radius: 12 },
br: { radius: 12 },
antiAlias: true
};
/* moooo */
$$('.round').each(function(rd) {
curvyCorners(settings,rd);
});

我强烈建议你应该指定需要使用圆角的元素,因为让脚本搜索整个页面来寻找需要圆角处理的元素是一个很耗CPU的过程,而且这个过程是每个页面加载时都会执行。

基本的所有浏览器都支持CSSborder-radius属性,包括IE,火狐,Safari,谷歌浏览器和Opera。这个小小的功能能让你的页面表现出完全别样的效果。

HTML / CSS 相关文章推荐
全面总结使用CSS实现水平垂直居中效果的方法
Mar 10 HTML / CSS
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
CSS3 transforms应用于背景图像的解决方法
Apr 16 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 HTML / CSS
Html5如何唤起百度地图App的方法
Jan 27 HTML / CSS
html5-Canvas可以在web中绘制各种图形
Dec 26 HTML / CSS
使用HTML5拍照示例代码
Aug 06 HTML / CSS
实例讲解HTML5的meta标签的一些应用
Dec 08 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 HTML / CSS
HTML中的表格元素介绍
Feb 28 HTML / CSS
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
May 07 #HTML / CSS
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 #HTML / CSS
纯CSS绘制漂亮的圆形图案效果
May 07 #HTML / CSS
css3制作彩色边线3d立体按钮的示例(css3按钮)
May 06 #HTML / CSS
css3实现顶部社会化分享按钮示例
May 06 #HTML / CSS
css3圆角边框和边框阴影示例
May 05 #HTML / CSS
CSS3 Columns分列式布局方法简介
May 03 #HTML / CSS
You might like
php生成文件
2007/01/15 PHP
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
php+MySQL判断update语句是否执行成功的方法
2014/08/28 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
php 基础函数
2017/02/10 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
js左侧三级菜单导航实例代码
2013/09/13 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
JavaScript实现类似淘宝的购物车效果
2017/03/16 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
JS实现星星海特效
2019/12/24 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
Python 求数组局部最大值的实例
2019/11/26 Python
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
优秀毕业生自荐信范文
2014/01/01 职场文书
绘画专业自荐信范文
2014/02/23 职场文书
求职面试个人自我评价
2014/02/28 职场文书
警示教育活动总结
2014/05/05 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
python中24小时制转换为12小时制的方法
2021/06/18 Python
新手入门Mysql--sql执行过程
2021/06/20 MySQL