ホームページ > 記事 > ウェブフロントエンド > 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) に注意してください。