CSS3 チュートリアル - ユーザー インターフェイス

こんにちは！フロントエンド開発の友人の皆様、いつもお付き合いいただきありがとうございます。今日の CSS3 チュートリアル ユーザー インターフェイスは、本当に実践的な内容を学べることを願っています。

CSS3 は Web サイトのインターフェースに独自のレンダリング属性を再提供します。この記事ではそれについて詳しく紹介します。

CSS3 ユーザー インターフェイス:

CSS3 では、要素、ボックス サイズ、アウトラインのサイズ変更などの新しいユーザー インターフェイス機能が追加されました。この章では、次のユーザー インターフェイスのプロパティについて学習します。

2. ボックスのサイズ変更。

ブラウザのサポート:

Firefox、Chrome、Safari はサイズ変更属性をサポートします。

Internet Explorer、Chrome、Safari、Opera はボックス サイズ属性をサポートしています。 Firefox にはプレフィックス -moz- が必要です。

Internet Explorer を除くすべての主要なブラウザーは、outline-offset プロパティをサポートしています。

CSS3 サイズ変更:

CSS3 では、resize 属性はユーザーが要素のサイズを変更できるかどうかを指定します。

CSS コードは次のとおりです:

例:

ユーザーが p 要素のサイズを変更できることを指定します:

p
{
resize:both;
overflow:auto;
}

CSS3 ボックス サイズ:

box-sizing プロパティを使用すると、正確な方法で定義できます特定の領域に適合する特定のコンテンツ。

例:

2 つの隣り合った境界線付きボックスを指定します:

p
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

CSS3 アウトライン オフセット:

outline-offset プロパティは、アウトラインをオフセットし、境界線の端を越えてアウトラインを描画します。

アウトラインとボーダーには 2 つの違いがあります:

1. アウトラインはスペースをとりません。

2. アウトラインは長方形でない場合があります。

CSS コードは次のとおりです:

例:

境界線の端から 15 ピクセルを超えたアウトラインを指定します:

p
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

新しい UI プロパティ:

次の表に、すべての変換プロパティを示します:

上記は CSS3 チュートリアルのユーザー インターフェイスの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。