攻撃する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至此告一段落,希望能给需要的朋友带来帮助,有新的想法和问题也欢迎讨论,有讲的不对的地方还恳请批评指正。