よく使用される 10 の CSS3 知識共有

時代の発展に伴い、ユーザーエクスペリエンスを向上させ、作業をより効率的にすることを目的として、フロントエンドの知識が更新されました。 CSS3 の登場により、よりクールなエフェクトを簡単に作成できるようになりました。仕事でよく使用される 10 個の CSS3 プロパティをまとめました。

1. テキスト効果

シャド​​ウ: text-shadow: X オフセット Y オフセット ぼかし度 シャドウ カラー; text-shadow: 5px 5px #FF0000; text-overflow: 省略記号; nowrap;

2. Font

@font-face { font-family: フォント名; src: サーバー上のフォント ファイルの相対パスまたは絶対パス;}
Call: font-family: フォント名;

3 、 3D変形

変位:translate3d(x,y,z)、translateZ(z)スケール:scale3d(x,y,z)、scaleZ(z)回転:rotate3d(x,y,z,angle)、rotateZ( angle )

4. 複数列レイアウトの列: (列幅) || (列数);列ギャップ 列ギャップ: 通常 || (長さ) リスト境界線 列ルール: (列ルール幅)|(列ルールスタイル)|(列ルール色) 列間設定 列スパン: なし| すべて

ボックスのサイズ: コンテンツ ボックス | ボーダー ボックスのサイズ変更: なし | 垂直 | -webkit - (Chrome および Safari)、-moz- (firefox)、-ms- (IE)、-o- (opera)

8、border

角丸: border-radius: 5px 4px 3px 2px;時計回り */

Shadow: box-shadow: X 軸オフセット Y 軸オフセット

[影のぼかし半径] [影の拡大半径] [影の色] [投影方法];

/* デフォルトの外側の影*/外側の影: ボックス-shadow:4px 2px 6px #333333;

シャドウの挿入: box-shadow:4px 2px 6px #333333 inset;

複数のシャドウ: box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;

ボーダー画像: border-image: 画像パスピクセル右回り拡張法 (リピート繰り返し

ラウンドタイルストレッチ) border-image:url(border.png) 30 30round; -webkit-border-image:url(border) .png) 30 30 ラウンド; /* Safari 5 以降 */ -o-border-image:url(border.png) /* Opera */

9、背景

サイズ: 背景サイズ: | カバー | 原点: ボーダー ボックス; クリップ: ボーダー ボックス | content-box | no-clip 複数の背景: [background-color] |

[background-position][/background-size] |
[background-attachment] | [background-clip] | [background-origin],...
【例】background:url(logoindex.png) no-repeat 左上/75% 50%, url(logoindex.png) no-repeat right lower/ 50% 45%;

10. グラデーション

: //デフォルトは上から下で、方向と角度は変更可能です
background: -webkit-linear-gradient(red, blue) /* Safari 5.1 - 6.0 */ 背景: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ 背景: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ 背景: Linear-gradient(red, blue); /* 標準構文*/

放射状グラデーション: 背景: -webkit-radial-gradient(red, green, blue) /* Safari 5.1 - 6.0 */ 背景: -o-radial; -gradient(red, green, blue); /* Opera 11.6 - 12.0 */ 背景: -moz-radial-gradient(red, green, blue) /* Firefox 3.6 - 15 */ 背景:radial-gradient(red,緑、青); /* 標準構文*/

以上がよく使用される 10 の CSS3 知識共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。