CSS3 チュートリアル (2): Web ページの境界線の半径と Web ページの角の丸み_css3_CSS_Web ページ

Webページ制作に関するWebjx記事の紹介: ページの角丸化の実装は非常に面倒な問題です 実装方法はたくさんありますが、どれも非常に面倒です。この記事では、CSS3 border-radius を使用して DIV の角を丸くする方法を見てみましょう。 ページの角丸を実現するのは非常に厄介な問題で、実現する方法は今でもいろいろありますが、どれも非常に面倒です。この記事では、CSS3 border-radius を使用して DIV の角を丸くする方法を見てみましょう。

前の記事「CSS3 チュートリアル: CSS3 とは」で述べたように、すべてのブラウザが CSS3 をサポートしているわけではありませんが、優れたブラウザは CSS3 を直接サポートするのではなく、互換性を選択します。使用できるプレフィックスが 2 つあります。
プレフィックス:
-moz (例: -moz-border-radius) Firefox の場合
-webkit (例: -webkit-border-radius) Safari および Chrome の場合。 CSS3 角丸 (すべて)
画像を使用せずに角丸を実現する機能は以前は非常に人気がありましたが、適切な CSS 背景として使用する完璧な小さな角丸画像を作成するのは非常に時間のかかる作業でした。 CSS3 を使用すると、わずか数行のコードで丸い角を作成できます。

これは、通常の境界線が 5 ピクセル、境界線の半径が 15 ピクセルの設定です。 -border-radius : 15px; パディング: 15px 25px; 高さ: 継承; 幅: 590px; }

Google Chrome(2.0.156) …)

もちろん、DIV の 4 つの角をすべて丸くする必要はありません。それらを個別に実装します。 角が丸い。

#roundCornerI{ フォントファミリー: Arial; ボーダー: 5px ソリッド #dedede; -moz-border-radius-topleft: 15px; -moz-border-radius-右下: 15px; -moz-border-radius-bottom-left: 0px; -webkit-border-top-right-radius: 0px;半径: 0px; -webkit-border-right-radius: 15px; パディング: 15x 25px; 高さ: 継承; 幅: 590px; } …)

Google Chrome (2.0.156…)

Opera 9.6

Safari (3.2.1 windows)