CSS3 学習メモ border-radius_html/css_WEB-ITnose

CSS3 はとても良いと思い、少し読んでいくつかの属性を試してみました。私自身、CSS3を学習しましたと言える勇気はなく、自分にとって小さなことは自分の視点で判断するしかないと感じています。私の意見では、「単純な」HTML であっても研究する価値はあります。常に謙虚な姿勢を維持することによってのみ、より先を見据え、より着実に進むことができます。

ここの Web サイトに感謝したいと思います:

w3cplus、W3School、W3C およびその他のオンライン チュートリアルとブログ (他にもたくさんありますが、1 つずつリストすることはしません)。伝説的な CSS3 と HTML5 に触れると、私自身の学習ノートが自然にそこから得られます。

今日はCSS3のborder-radius

の角丸をご紹介します

あの頃を思い出してみてください...CSS2をベースに角丸を作るのはスキルと言えるでしょう！ ！さまざまな写真とさまざまなネスティング (「CSS をマスターする?? 高度な Web 標準ソリューション」で紹介されています)。ここではそのプロセスには触れません。オンラインで検索すると見つかります。要するに、私はそれが非常にハイエンドだと思っていました。 CSS3 を使用した後は、CSS3 を再度見たくなくなります)

しかし、CSS3 の角丸属性 border-radius の登場以来、大多数のフロントエンド エンジニアは多くのトラブルを回避できるようになり、これにより問題が軽減されるだけでなく、ワークロードが軽減されるだけでなく、Web サイトのパフォーマンスも向上します。 IE の高貴なローエンド バージョンが CSS3 のプロパティのほとんどをサポートしていないのは残念です...またはほとんどサポートしていません。優れた人々が IE 用の互換性ソリューションを数多く作成していますが、私はそれらをお勧めしません。多くの場合、角が丸いと見た目がエレガントになるだけで、基本的にユーザーの使用には影響しません。

角の丸い部分が表示されない場合は、IE のバージョンが低いだけです。 ！ ！ ！

さて、この高貴な属性を正式に導入しましょう

border-radius の使用法:

属性名	border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius 、border-top-left-radius、border-radius
属性値	長さ（例：10px）
初期値	0
継承可能	継承不可

border-radius の値は、円弧の形状を決定します。各角の円弧は、実際には、この角に設定された値を半径として描画された円の 1/4 の円弧になります。

例: border-radius の値が 1 つだけの場合

set border-radius: 50px;

CSS コード:

 1: .test{

 2:     width:200px;

 3:     height:200px;

 4:     background:#368;

 5:     margin:80px auto;/*为了使元素居中，没有别的意思*/

 6:     -webkit-border-radius:50px;

 7:     -moz-border-radius:50px;

 8:     -o-border-radius:50px;

 9:     border-radius:50px;

 10: }

れーれー

れーれー

効果は次のとおりです。

効果をより明確にするために、border-radius の値を div.test の幅の半分である 100px に変更します。

ご覧のとおり、完全な円！ ！ ！ ！円の中心を通り、水平方向と垂直方向に線を引くと、各角の円弧は実際にはこの値を半径として描いた円の 1/4 の円弧であることがわかります。

別の例: border-radius に複数の値がある場合

Set border-radius: 100px 50px; (コードは上記と似ていますが、border-radius が変更されているため、繰り返しません)。

テスト後、私のGoogle、Firefox、IE9および10での効果は次のとおりです

上の写真のようであれば。左上隅を「左」、右上隅を「右」などに設定します。2 つの値の境界半径の規則は、マージンとパディングの規則と似ていることがわかります。最初の値は上と下を表し、2 番目の値は左と右を表します。

同様に set border-radius: 100px 50px 0px;

効果は次のとおりです:

Set border-radius: 100px 50px 25px 0px;

テスト後の効果は次のようになります

、

前に述べたように、border-radius 値の設定は、padding や miargin と同じで、非常に簡単です。

それでは、使い方をまとめてみましょう:

値が 1 つだけの場合、4 つの角は同じ円弧で丸められます。 値が 2 つしかない場合、最初の値は左上隅と右下隅を表し、2 番目の値は右上隅と左下隅を表します。値が 3 つある場合、最初の値は左上隅を表します。 、2番目の値は真ん中の値であり、3番目の値は右上隅と左下隅の値が4つある場合、左上の順序で表現されることを意味します。 、右上、右下、左下

全文はここで終わり、間違いがあります修正歓迎!!