css3 チュートリアル-border-radius プロパティ

前回の記事では、css3 のtutorial-border について主に説明し、border の 3 つの属性について簡単に説明しました。次に、Cui'er 姉妹が css3 のtutorial-border-radius 属性について説明します。境界線のプロパティの 1 つであり、フロントエンド開発作業でよく使用されます。皆さんもぜひ遊びに来て調べてみてください。

最初に例を示します:

div 要素に丸い境界線を追加します:

div
{
border:2px solid;
border-radius:25px;
}

ブラウザのサポート:

IE9+、Firefox 4+、Chrome、Safari 5+、および Opera は、border-radius をサポートします。属性。

定義と使用法:

border-radius プロパティは、4 つの border-*-radius プロパティを設定するために使用される短縮プロパティです。

ヒント: この属性を使用すると、要素に丸い境界線を追加できます。

構文:

border-radius: 1-4 length|% / 1-4 length|%;

コメント: 各半径の 4 つの値をこの順序で設定します。左下を省略した場合は右上と同じになります。 lower-right を省略した場合は、top-left と同じになります。 top-right を省略した場合は、top-left と同じになります。

例 1

border-radius:2em;

は次と同等です:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

例 2

border-radius: 2em 1em 4em / 0.5em 3em;

は以下と同等です:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

上記は css3tutorial-border-radius 属性の内容です。さらに関連する内容については、こちらをご覧ください。 PHP 中国語 Web サイト (www.php.cn) に注意してください。