css3 共通属性コレクション

RGBA

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

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

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

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

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

テキスト シャドウは次の順序で構成されます: 118、160、.25);

は負の値に設定され、X オフセット シャドウは左にシフトします。 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 つのパラメーター設定があります:

シャドウ タイプ: このパラメーターはオプションの値です。値が設定されていない場合、デフォルトの投影方法は外側のシャドウです。値 "inset" のみが使用される場合、外側のシャドウは内側になります。シャドウ、つまり、シャドウ タイプが "inset" に設定されている場合、その投影は内側のシャドウになります。

X-offset: シャドウの水平オフセットを指し、その値は正または負になります。値が正の場合、影はオブジェクトの右側にあります。逆に、値が負の場合、影はオブジェクトの左側にあります。

Y オフセット: 垂直方向を指します。影のオフセットの値は、正または負の値にすることもできます。正の値の場合、影はオブジェクトの下部にあり、値が負の場合、影はオブジェクトの上部にあります。 : このパラメータはオプションですが、値が 0 の場合、値が大きいほど影のエッジがぼやけます。

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

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

ボックスの境界線の半径 border-radius (ブラウザを決定する必要があります)

境界線の半径の略語は、Padding プロパティと Margin プロパティに似ています (境界線の半径: 20 ピクセルなど)。

境界線の半径をブラウザの順序でレンダリングするには、WebKit ブラウザでは「-WebKit-」を、Firefox では「-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 中国語に注意してください。ウェブサイト (www.php .cn)!