html的圆角效果图,CSS3圆角的制作

CSS3圆角技术能非常好的美化你的页面效果&＃xff0c;而且避免了使用图片辅助&＃xff0c;一则省去了制作图片的时间&＃xff0c;二则省去了浏览器加载图片造成的延迟和带宽。如今&＃xff0c;这种利用CSS制作圆角的技术已经得到了大多数主流浏览器的支持&＃xff0c;包括Safari&＃xff0c;谷歌浏览器&＃xff0c;IE&＃xff0c;Opera和火狐浏览器。下面让我们来看看border-radius的语法&＃xff0c;解释&＃xff0c;以及IE是如何支持它的。

语法和说明

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

.roundElement{

border-radius: 10px;

}

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

.pearElement{

border-top-left-radius: 7px;

border-top-right-radius: 5px;

border-bottom-right-radius: 6px;

border-bottom-left-radius: 8px;

}

如果你觉得上面的写法太复杂&＃xff0c;可以使用下面border-radius简写的方法&＃xff1a;

.oddRoundElement {

border-radius: 12px 5px 12px 5px;

/* or */

border-radius: 12px 5px;

}

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

各浏览器对border-radius的支持

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

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

-o-border-radius: 20px;

/* 火狐浏览器 */

-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 */

/* 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 */

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

让IE支持border-radius

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

border-top-right-radius: 7px;

border-top-left-radius: 7px;

border-bottom-right-radius: 2px;

border-bottom-left-radius: 2px;

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

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

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

var settings &＃61; {

tl: { radius: 12 },

tr: { radius: 12 },

bl: { radius: 12 },

br: { radius: 12 },

antiAlias: true

};

/* moooo */

$$(&＃39;.round&＃39;).each(function(rd) {

curvyCorners(settings,rd);

});

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

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