css3の共通プロパティの紹介

RGBA

background：rgba(0, 118, 160, .25);

最初の 3 つの値は RGB カラー値で、最後の値は透明度のレベル (0 = 透明、1 = 不透明) です。

RBGAは、フォントの色、境界線の色、背景の色、影の色などの色関連のプロパティに適用できます。

text-shadow text-shadow (ブラウザを判断する必要はありません)

text-shadow:2px 3px 2px #000;

テキスト シャドウの構造は次の順序です: X オフセット、Y オフセット、ブラー、カラー

text-shadow:-2px -3px 2px rgba(0, 118, 160, .25);

は負の値に設定され、 Offset Y を負の値に設定すると、影が上に移動します。色には RGBA 値を使用できます。

text-shadow:0px 1px 0px #fff,0px -1px 0px #000；

テキストシャドウのリスト (カンマ区切り)、上 1 ピクセル、下 1 ピクセルのシャドウ。

ボックスシャドウ box-shadow (ブラウザを決定する必要があります)

ボックスシャドウの構造はテキストシャドウと同じです: それぞれマーク: X オフセット、Y オフセット、ブラー、カラー。

-webkit-box-shadow:5px 5px 7px #333;
-moz-box-shadow:5px 5px 7ix #333;

同様に、複数の影スタイルをカンマで区切って定義できます。

moz-box-shadow:
-2px -2px 0 #fff,
2px 2px 0 #bb9595,
2px 4px 15px rgba(0, 0, 0, .3);

box-shadow 属性には最大 6 つのパラメータ設定があります:

Shadow type: このパラメータはオプションの値です。値が設定されていない場合、唯一の値が「inset」の場合、デフォルトの投影方法は外側のシャドウです。これは、外側のシャドウを内側のシャドウに変えることです。つまり、シャドウ タイプが「inset」に設定されている場合、その投影は内側のシャドウになります;

X オフセット: の水平オフセットを指します。値は正または負の値を指定できます。値が正の場合、影はオブジェクトの右側にあります。それ以外の場合、値が負の場合、影はオブジェクトの左側にあります。

Y オフセット: 影の垂直オフセットを指し、その値は正または負の値になります。それ以外の場合、影はオブジェクトの下部にあります。値が負の場合、影はオブジェクトの上部にあります。

影のぼかし半径: このパラメータはオプションですが、値が 0 の場合は、影が存在しないことを意味します。ぼかし効果。値が大きいほど、影のエッジがぼやけます。

影の拡張半径: このパラメータはオプションであり、その値が正の場合、影全体が拡張されます。それ以外の場合、値が負の場合は減らされます。

影の色: このパラメーターはオプションです。色が設定されていない場合、ブラウザーはデフォルトの色を使用します。特に Safari では、デフォルトの色が異なります。 Webkit カーネル下の Chrome ブラウザは無色、つまり透明になります。このパラメータを省略しないことをお勧めします。

box border radius border-radius (ブラウザを決定する必要があります)

border radius の略語は、Pad​​ding および Margin 属性に似ています (例えば、border radius: 20 ピクセル)。

境界線の半径をブラウザの順序でレンダリングするには、WebKit ブラウザでは「-WebKit-」を、Firefox では「-moz-」を使用します。

border-radius:20px;
-webkit-border-radius:20px;
-moz-border-radius:20px;

各コーナーに異なる値を指定できます。 Firefox と Webkit Angular ではプロパティ名が異なることに注意してください。

「Webkit」の書き方

-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:25px;
-webkit-border-right-left-radius:45px;

「Firefox」の書き方

-moz-border-radius-topleft:5px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:25px;
-moz-border-radius-bottomright:45px;

以上がcss3の共通プロパティの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。