CSS3 角丸 Border-radius_html/css_WEB-ITnose

前回のシステムでは、CSS3 でのグラデーションと RGBA の使用法をまとめました。今日は、CSS3 で角を丸くするための border-radius プロパティの具体的な使用法を見ていきます。 CSS2では誰もが角丸処理に遭遇したことがあります。当時、角丸の制作には、複数の角丸画像を背景として使用し、それぞれの角に適用する必要がありましたが、私がよく使用したのは、角丸が必要な要素タグに空のタグを 4 つ追加することでした。次に、各空のラベルに丸い背景の位置を適用し、角が丸いラベルを対応する位置に配置します。具体的な実装プロセスについては、見ているだけでは面倒になりますので省略します。

CSS3 の border-radius が登場したので、それほど心配する必要はありません。まず、丸みを帯びた画像を作成する時間が節約され、多くの利点もあります。ウェブサイトのメンテナンスの負荷が軽減され、画像の更新や制作、コードの置き換えなどが軽減されます。第二に、ウェブサイトのパフォーマンスが向上し、ウェブページの読み込み速度が速くなります。 http による画像のリクエスト。第三に、視覚的な美しさが向上します。 border-radius には非常に多くの利点があるため、その構文、属性、属性値、角を丸くする方法、角を丸くする以外に何ができるのか、その応用例を見ていきます。非常にたくさんあるので、始めましょう:

1. 構文:

border-radius ： none | <length>{1,4} [/ <length>{1,4} ]?

2. 値:

: 浮動小数点数とユニット識別子で構成される長さの値。負の値は指定できません。

3. 説明:

border-radius は省略メソッドです。 「/」の前後の値が両方存在する場合、「/」の前の値が水平方向の半径を設定し、「/」の後の値が垂直方向の半径を設定します。 「/」がなければ、水平半径と垂直半径は等しくなります。また、その 4 つの値は、左上、右上、右下、左下の順に設定されます。主に次の状況が発生します。

1. {1,4} ]; //ここには値が 1 つだけあり、左上、右上、右下、左下の 4 つの値は等しい

2. border-radius: [ {1,4} ] [ {1,4} ] // ここで 2 つの値を設定すると、左上が下と等しくなります。右、最初の値を取得し、左下の値に等しい、2 番目の値

3 を取得します。 {1,4} ] [ {1,4} ];//値が 3 つある場合、最初の値は左上に設定され、2 番目の値は右上と左下に設定されます。 3 番目の値は、bottom -right

4 に設定されます。 border-radius:[ {1,4} ] [ {1,4} ] [ < length>{1,4} ] [ < length>{1,4} ];// 値が 4 つある場合、最初の値は左上に設定され、2 番目の値は右上に設定されます。は右下、4 番目の値は左下に設定します

先ほどは主に border-radius の省略形式について説明しましたが、実際には、border-radius は border 属性と同じです。各コーナーを個別に分離することもできます。これは、次の 4 つの書き込み方法です。ここでは、すべて Y 軸を最初に配置し、次に X 軸を配置します。詳細については、以下を参照してください。

ここで、各コーナーを分割する値の方法について説明します。 <長さ> <長さ> 最初の値はフィレットの水平方向の半径で、2 番目の値は垂直方向の半径です。省略すると、最初の値と同じになります。このとき、角が 0 の場合、角は丸められていません。

border-top-left-radius: <length>  <length>   //左上角border-top-right-radius: <length>  <length>  //右上角border-bottom-right-radius:<length>  <length>  //右下角border-bottom-left-radius:<length>  <length>   //左下角

border-radius は、次のブラウザ バージョンでのみ border-radius 標準構文形式をサポートします: Firefox4.0 以降、Safari 5.0 以降、Google Chrome 10.0 以降、Opera 10.5 以降、IE9 以降、古いバージョンのブラウジング用たとえば、Mozilla カーネルには「-moz」を追加する必要があり、Webkit カーネルには「-webkit」を追加する必要があります。すべての主要なカーネルと互換性があります。古いブラウザの場合は、さまざまなカーネル ブラウザでの border-radius の記述形式を見てみましょう。

1. Mozilla (Firefox、Flock およびその他のブラウザ)

2. WebKit (Safari、Chrome およびその他のブラウザ)

-moz-border-radius-topleft: //左上角  -moz-border-radius-topright: //右上角  -moz-border-radius-bottomright: //右下角  -moz-border-radius-bottomleft: //左下角      等价于：  -moz-border-radius: //简写

3. Opera ブラウザ:

-webkit-border-top-left-radius:  //左上角  -webkit-border-top-right-radius:  //右上角  -webkit-border-bottom-right-radius:  //右下角  -webkit-border-bottom-left-radius:  // 左下角   等价于：  -webkit-border-radius:  //简写

4. IE<9 は border-radius をサポートしません。IE9 では専用形式が存在せず、Border-radius が使用されます。記述方法は Opera と同じなので、ここでは繰り返しません。

border-top-left-radius: //左上角  border-top-right-radius: //右上角  border-bottom-right-radius: //右下角  border-bottom-left-radius: //左下角    等价于：   border-radius: //简写

新しいか古いかに関係なく、すべてのカーネル ブラウザーが border-radius 属性をサポートするには、border-radius 形式を次のように変更する必要があります。

分割形式には次のものが必要です。それに応じて -moz と -webkit を追加すると、上記のコードは実際には次のコードと同等になります:

-moz-border-radius-topleft: <length> <length> //左上角  -moz-border-radius-topright: <length> <length> //右上角  -moz-border-radius-bottomright: <length> <length> //右下角  -moz-border-radius-bottomleft: <length> <length> //左下角  -webkit-border-top-left-radius:  <length> <length> //左上角  -webkit-border-top-right-radius:  <length> <length> //右上角  -webkit-border-bottom-right-radius: <length> <length> //右下角  -webkit-border-bottom-left-radius:  <length> <length> // 左下角  border-top-left-radius: <length> <length> //左上角  border-top-right-radius: <length> <length> //右上角  border-bottom-right-radius: <length> <length> //右下角  border-bottom-left-radius: <length> <length> //左下角

另外需要特别注意的是，border-radius一定要放置在-moz-border-radius和-webkit-border-radius后面，（特别声明：本文中所讲实例都只写了标准语法格式，如果你的版本不是上面所提到的几个版本，如要正常显示效果，请更新浏览器版本，或者在border-radius前面加上相应的内核前缀，在实际应用中最好加上各种版本内核浏览器前缀。）

我们初步来看一个实例：

HTML代码：

<div class="demo"></div>

为了更好的看出效果，我们给这个demo添加一点样式：

.demo {  width: 150px;  height: 80px;  border: 2px solid #f36;  background: #ccc;}

注：如无特殊声明，本文实例所有基本代码格式如上所示，只在该元素上添加border-radius属性设置。

.demo {  border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;}

这种写法我们前面有提到过，“/”前是指圆角的水平半径，而“/”后是指圆角的垂直半径，他们两都遵循TRBL的顺序原则。为了能让大家更清楚理解，我们把上面代码换成如下：

.demo {  border-top-left-radius: 10px 20px;  border-top-right-radius: 15px 30px;  border-bottom-right-radius: 20px 10px;  border-bottom-left-radius: 30px 15px;}

不仿看看他们的效果：

三、支持的浏览器：

上面我们介绍了border-radius的基本用法，以及在各大浏览器下的格式等，下面我们通过实例来介绍其具体的用法：

一：border-radius只有一个取值时，四个角具有相同的圆角设置，其效果是一致的：

.demo {  border-radius: 10px;}其等价于：.demo{ border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;}

效果：

二：border-radius设置两个值，此时top-left等于bottom-right并且他们取第一个值；top-right等于bottom-left并且他们取第二个值，也就是说元素 左上角和右下角相同，右上角和左下角相同

.demo {  border-radius: 10px 20px;}      等价于：       .demo {  border-top-left-radius: 10px;  border-bottom-right-radius: 10px;  border-top-right-radius: 20px;  border-bottom-left-radius: 20px;}

效果：

三：border-radius设置三个值，此时top-left取第一个值，top-right等于bottom-left并且他们取第二个值，bottom-right取第三个值

.demo {  border-radius: 10px 20px 30px;}       等价于        .demo {  border-top-left-radius: 10px;  border-top-right-radius: 20px;  border-bottom-left-radius: 20px;  border-bottom-right-radius: 30px;}

效果：

四：border-radius设置四个值，此时top-left取第一个值，top-right取第二个值，bottom-right取第三个值.bottom-left取第四个值

.demo {  border-radius:10px 20px 30px 40px;}       等价于        .demo { border-top-left-radius: 10px; border-top-right-radius: 20px; border-bottom-right-radius: 30px; border-bottom-left-radius: 40px;}

效果：

从上面四个实例中我们可以看出border-radius和border取值非常相似，我们border遵循TRBL原则（从上边右边下边左边分别对应1、2，3，4四个值），只不过border-radius换成了左上角(top-left)对就值1，右上角（top-right）对应值2，右下角(bottom-right)对应值3，左下角(bottom-left)对应值4.

上面四个实例都是水平和垂直半径相等情况下border-radius的应用，下面我们来看几个水平和垂直半径值不一样的实例：

一、border-radius: 水平 / 垂直：只设置一个水平和一个垂直半径时，那么水平半径分别指定了元素个四个角的水平半径值，同样垂直半径指定了元素的垂直半径值，此时四个角具有相同的效果，因为他们具有相同的值

.demo {  border-radius: 10px / 20px;}       等价于：        .demo {  border-top-left-radius: 10px 20px;  border-top-right-radius: 10px 20px;  border-bottom-right-radius: 10px 20px;  border-bottom-left-radius: 10px 20px;}

效果：

此时我们每个角不在是四分之一圆了，前面我们也说过，只有水平和垂直半径值相同时，他们才具有四分之一圆特性，这样一来，我们可以改变不同的半径值，制作一些特殊的图形效果，感兴趣的朋友可以自己在本地尝试一下各种不同的设置方式。

二、border-radius: 水平1 水平2 / 垂直1 垂直2：设置了两个水平值和两个垂直值，此时我们top-left和bottom-right具有相同的水平和垂直半径，也就是其中的水平1和垂直1；而top-right和bottom-left也具有相同的水平和垂直半径值，也就是水平2和垂直2，我们他拆分出来就是：

border-top-left-radius: 水平1  垂直1；border-bottom-right-radius: 水平1  垂直1；border-top-right-radius: 水平2  垂直2；border-bottom-left-radius: 水平2  垂直2;

具体我们来看下面的实例：

.demo {  border-radius: 10px 20px / 20px 10px;}        等价于：        .demo {  border-top-left-radius: 10px 20px;  border-bottom-right-radius: 10px 20px;  border-top-right-radius: 20px 10px;  border-bottom-left-radius: 20px 10px;}

效果：

上面两种都是相互对应的取值，我们来看一个实例，水平有三个取值，而 垂直只有两个取值

.demo {  border-radius: 10px 20px 30px / 50px 60px;}        等价于：        .demo {  border-top-left-radius: 10px 50px;  border-top-right-radius: 20px 60px;  border-bottom-left-radius: 20px 60px;  border-bottom-right-radius: 30px 50px;}

效果：

我们从上面等价代码中可以知道，不管他们怎么取值，“/”前后各自按TRBL顺序取值。

上面几种都是我们常见的一些应用，那下面我们来看几种特殊点的应用：

一、对于border-radius还有一个内半径和外半径的区别，它主要是元素 边框值较大时，效果就很明显，当我们border-radius半径值小于或等于border的厚度时，我们边框内部就不具有圆角效果,例如下面的实例

.border-big {   border: 15px solid green;   border-radius: 15px;}

效果：

我们接着上面这个例子，把 border-radius半径值改成比边框值大一点：

.border-small {   border: 15px solid green;   border-radius: 25px;}

效果：

为何当border-radius的半径小于元素边框的厚度时，内部没有圆角效果？我在这里说一下，因为我们的border-radius的内径值是等于外径值减去边框厚度值，当他们的值为负时，内径默认为0,最前面讲border-radius取值时就说过其值不能为负值。同时也说明border-radius的内外曲线的圆心并不一定是一致的。只有当边框厚度为0时，我们内外曲线的圆心才会在同一位置。

二、如果角的两个相邻边有不同的宽度，那么这个角将会从宽的边平滑过度到窄的边。其中一条边甚至可以是0。相邻转角是由大向小转。

.demo {  border-width: 10px 5px 20px 3px;  border-radius: 30px;}

效果：

三、相邻两条边颜色和线条样式不同时，那么两条相邻边颜色和样式转变的中心点是在一个和两边宽度成正比的角上。比如，两条边宽度相同，这个点就是一个45°的角上，如果一条边是另外一条边的两倍，那么这个点就在一个30°的角上。界定这个转变的线就是连接在内外曲线上的两个点的直线。我们来看一个四边颜色不一样，宽度不一样的实例：

.demo {  border-color: red green blue orange;  border-width: 15px 30px 30px 80px;  border-radius: 50px;}

效果：

上面这几种是比较特殊点的用法，如果大家还想通过border-radius制作更多不同形状，或者更多的应用，可以点击 这里 。

border-radius能应用在各种元素中，但在img和table应用时会有点差别的，首先先来看图片上应用border-radius时的情况。在img上应用border-radius到目前只有Firefox4.0+浏览器才正常，而在其他浏览器都不能对图片进行剪切，我们先来看一个实例：

img {  border: 5px solid green;  border-radius: 15px;}

我们来看其在各浏览器下的效果：

左图是在Safari5.0、Google Chrome 10.0、Opera11.1下的效果，我们可以看得出，图片根本就没有圆角效果，右图是在Firefox4.0下的效果，低于这个版本的和左图一样效果，如果需要达成一致效果，大家就必须放弃border-radius而采用CSS2制作圆角的老办法。另外table的样式属性border-collapse是collapse时,border-radius不能正常显示,只有border-collapse: separate;时才能正常显示。

table {  border-collapse: collapse;  border: 2px solid red;  background: green;  border-radius: 15px;}

效果：

关于表格的demo可以查看 这里

那么到此，我们border-radius的一些用法就介绍完了。希望能给大家带来一点帮助，感兴趣的朋友可以观注本站后面的内容，我们下节将介绍 CSS3 中的文字阴影： text-shadow 的用法。更希望感兴趣的朋友一起探讨和学习 CSS3 更多的技术知识。

下面列表本站关于 CSS3 的其他属性的用法：

第一节： 《CSS3 Gradient》

上一节： 《CSS RGBA》

下一节：《 CSS3的文字阴影text-shadow 》

第五节：《CSS3 Box-shadow》

第六节：《CSS3 Transform》

第七节：《CSS3 Transition》

第八节：《CSS3 Animation》

如需转载请注明出处：W3CPLUS