CSS3 分隊 - border-radius_html/css_WEB-ITnose の攻撃

前回の記事：「CSSのfloat属性を簡単に解説??」Floatは水のようなもの

あらゆる障害を乗り越えてCSS3が登場したとき、私たちが目にするのは、より操作しやすく、より眩しいHTMLの世界です。 CSS3 が完全に普及し、複数の主流ブラウザが CSS3 プロパティと互換性を持ち始めれば、フロントエンド開発者にとっても、ブラウザの前に座って Web を閲覧している私たちにとっても素晴らしいことになるでしょう。何日もの間、ホールの前にいた王と王妃が一般の人々の家に飛んできました。」

攻撃するCSS3チームの皆さん、華やかなベールを一つ一つ脱いでいきましょう。最初に表示されるのは border-radius です。

1. 丸い角を生成する CSS2 コード

Web デザインでは、領域を美しくするために丸い角を使用できます。CSS2 では、丸い角を作成したい場合、多くの方法がありますが、どれも比較的複雑です。たとえば、最も便利な方法は角の丸い画像を使用することですが、http リクエストが増加し、ユーザー エクスペリエンスがわずかに低下します。コードを使用する場合は、次のようなアイデアを使用できます。複数の要素を積み重ねて角を丸くするのですが、コードがそれ以上あると見るのが面倒になります。もちろん他の方法もあり、友達は想像力を働かせることができますが、border-radius ほどスムーズで直接的ではないはずです。

無敵の戦いであろうとなかろうと、自分自身と敵を知ることが必要であるため、まず CSS2 コードを使用して丸い角を生成して効果を確認しましょう:

アイデアは、複数の div を使用してオーバーレイすることです。角が丸くなる効果が得られます。 上 2 隅と下 2 隅の div クラスの順序は逆にすることができ、メインの div が領域のサイズを決定します。

HTML マークアップ

<!--左上角/右上角--><div class="r_top"><div class="r_a"></div><div class="r_b"></div><div class="r_c"></div><div class="r_d"></div><div class="r_e"></div><div class="r_f"></div><div class="r_g"></div><div class="r_h"></div></div><div class="box"><!-- 主体部分 --></div><!--左下角/右下角--><div class="r_bottom"><div class="r_h"></div><div class="r_g"></div><div class="r_f"></div><div class="r_e"></div><div class="r_d"></div><div class="r_c"></div><div class="r_b"></div><div class="r_a"></div></div>

CSS コード

<!--左上角/右上角--><div class="r_top"><div class="r_a"></div><div class="r_b"></div><div class="r_c"></div><div class="r_d"></div><div class="r_e"></div><div class="r_f"></div><div class="r_g"></div><div class="r_h"></div></div><div class="box"><!-- 主体部分 --></div><!--左下角/右下角--><div class="r_bottom"><div class="r_h"></div><div class="r_g"></div><div class="r_f"></div><div class="r_e"></div><div class="r_d"></div><div class="r_c"></div><div class="r_b"></div><div class="r_a"></div></div>

ズームインして効果を確認してみましょう:

公開されるべきものはすべて公開されます。 。 。

上記は CSS2 によって作成された角丸効果です。明らかなコードの重複と大量のコードがあります。同じ考え方を使用して、より大きな半径の丸い角を生成し、さらに丸い角の効果をより丸くしたい場合は、より多くのタグとより多くの繰り返しコードを追加する必要があります。これは私たちが望んでいることではありません。 。 の。

2. CSS3 の border-radius 攻撃

CSS3 に追加された border-radius は、本当に大きな利便性をもたらしてくれました。まず構文を見てみましょう:

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

border-radius は、border-*-radius の属性を設定するために使用される、4 つの値です。は、top-left 、top-right、bottom-right、bottom-left に基づいており、上から時計回りに順番に設定されます。以下に 8 つの状況について説明します。

1. border-radius:20px; 属性の後に値が 1 つだけある場合、左上、右上、右下、左下は同じ角の半径になります。

2. border-radius:20px 40px; 属性の後に 2 つの値があり、左上と右下が最初の値をとり、右上と左下が 2 番目の値を取得します。 、対角値、効果は次のとおりです:

3. border-radius: 20px 30px 40px; 属性の後に 3 つの値があり、左上が最初の値、右上が 1 番目の値になります。左下 2 番目の値を取得、右下 3 番目の値を取得するには、実際には左上、右上、右下、左下の順、つまり上から時計回りに設定されます。通常の状況では、右上と左下の値は等しいため、3 番目の値は当然右下になり、その結果は次のようになります:

4。 20px 30px 40px 50px; 属性の後に4つの値があり、左上、右上、右下、左下の順序で上から時計回りに設定されます。効果は次のとおりです:

上記は基本的な 4 つの値です。 次に、他の 4 つの値の形式は、実際には上記の 4 つの形式と変わりません。異なる水平半径と垂直半径が設定されます:

5. border-radius: 水平半径/垂直半径、つまり、border-radius: 20px/40px、つまり、4 つの丸い角はすべて同じ水平半径と垂直半径になります。これは実際には 1 の変形です。効果は次のとおりです:

6. border-radius: 水平半径 1 水平半径 2/垂直半径 1 垂直半径 2、つまり、border-radius: 20px 30px /40px 50px; つまり、左上と右下は水平半径 1 と垂直半径 1 をとり、右上と左下は水平半径 2 と垂直半径 2 をとり、実際には 2 変形に属し、効果は次のようになります。

7. border-radius: 水平半径 1 水平半径 2 水平半径 3/垂直半径 1 垂直半径 2 垂直半径 3、つまり、border-radius: 20px 30px 40px/50px 60px 70px;つまり、左上は水平半径 1 と垂直半径 1 をとり、右上と左下は水平半径 2 と垂直半径 2 をとり、右下は水平半径 3 と 1 をとります。垂直方向の半径は 3 です。実際、これは 3 の変形であり、効果は次のとおりです:

8、border-radius:水平半径1 水平半径2 水平半径3 水平半径4/垂直半径1 垂直半径2 垂直半径3 垂直半径4,即border-radius：20px 30px 40px 50px/60px 70px 80px 90px;即顺时针依次取值，其实属于4的变形，效果如下：

 

当然，除了像素等单位，还可以用百分号作单位，不要忘记哦~~~~~~~~~

让我们放大效果看一下：

 

放大以后，圆角依然是像素级别的，一下子感觉整个世界都圆润起来了呢。

当然，border-radius也可以拆开写：

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

PS：对于较老的浏览器请不要忘记添加可恶的浏览器前缀-moz-/-webkit-。

三、这货能干什么

border-radius能干什么就是厨师做菜的问题了，不一样的厨师有不一样的思想，有不一样的手艺，做出来的菜肴也千差万别。

有这样的菜品：

 

也有这样的菜品：

 

还有这样椭圆的菜品：

 

或者来个圆圆的大饼等等：

 

如上图所示，border-radius为我们生成椭圆和圆提供了很大的便利，也为我们生成更多的图案提供的更多的可能。

四、小了个结

关于border-radius至此告一段落，希望能给需要的朋友带来帮助，有新的想法和问题也欢迎讨论，有讲的不对的地方还恳请批评指正。

上一篇：《CSS float属性小解??”浮“生若水》