关于css:CSS3圆角的制作

47次阅读

共计 2500 个字符，预计需要花费 7 分钟才能阅读完成。

分享：

CSS3 圆角技术能十分好的丑化你的页面成果，而且防止了应用图片辅助，一则省去了制作图片的工夫，二则省去了浏览器加载图片造成的提早和带宽。现在，这种利用 CSS 制作圆角的技术曾经失去了大多数支流浏览器的反对，包含 Safari，谷歌浏览器，IE，Opera 和火狐浏览器。上面让咱们来看看 border-radius 的语法，解释，以及 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;

/* 火狐浏览器 */
-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 */</pre>

基本上，你须要对每种浏览器引擎做各自的申明，加上这些厌恶的略微不同的代码来保障齐全反对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。这个小小的性能能让你的页面体现出齐全别样的成果。

正文完