CSSのグラデーションカラー、省略記号、埋め込みフォント、文字影について詳しく紹介

CSS3 グラデーションは線形グラデーション(linear)と放射状グラデーション(radial)に分けられます。レンダリング エンジンが異なると、グラデーションを実装するための構文が異なるため、ここでは線形グラデーションの W3C 標準構文に基づいてその使用法のみを分析します。残りについては関連情報を参照してください。 W3C 構文は、IE10 以降、Firefox19.0 以降、Chrome26.0 以降、Opera12.1 以降などのブラウザでサポートされています。

このセクションでは、線形グラデーションについて説明します:

パラメーター:

最初のパラメーター: キーワード「角度」または「英語」で表現できるグラデーションの方向を指定します:

(画像をクリックすると拡大します)

最初のパラメータを省略した場合、デフォルトは「180deg」で、これは「下まで」に相当します。

2 番目と 3 番目のパラメーターは色の開始点と終了点を表し、複数の色の値を持つことができます。

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

Rendering:

2. text-overflow と word-wrap

text-overflow は、オブジェクト内のテキストのオーバーフローをマークするために省略記号 (...) を使用するかどうかを設定するために使用されます。

文法:

ただし、text-overflow は、テキストがオーバーフローしたときに省略記号を生成する効果を実現するために、1 行で表示されるように強制するテキストも定義する必要があります。 (white-space:nowrap) そして、オーバーフロー コンテンツは非表示になります (overflow:hidden)。この方法でのみ、オーバーフロー テキストに省略記号を表示する効果が得られます。コードは次のとおりです。 overflow:hidden;white-space:nowrap;

同時に、ワードラップを使用して、指定したコンテナの境界を超えたときに現在の行を改行するかどうかを設定することもできます。

構文:

normal はブラウザのデフォルト値です。ブレークワードは長い単語または URL アドレス内で折り返されるように設定されています。この属性は一般的には使用されません。ブラウザのデフォルト値を使用してください。

3. フォントを埋め込む @font-face

@font-face はサーバー側のフォント ファイルをロードして、ユーザーのコンピューターにインストールされていないフォントをブラウザーで表示できるようにします。

構文:

@font-face {

font-family: フォント名;

src: サーバー上のフォントファイルの相対パスまたは絶対パス;
}

このように設定すると、次のように使用できます。 ( font-*) で通常のフォントを使用してフォント スタイルを設定します。

例:

p {

font-size:12px;

font-family: "My Font";
/*必須、同じ値の font-family を @font-face*/
に設定します}

4、テキストシャドウ text-shadow

text-shadow は、テキストのシャドウ効果を設定するために使用できます。

構文:

text-shadow: X-Offset Y-Offset ぼかしの色;

Y-Offset: 値が正の場合、影は下方向にオフセットされ、それ以外の場合は影がオフセットされます。上向き;

ブラー: 影のぼかし度を指し、その値を負にすることはできません。値が大きい場合、影はぼやけます。それ以外の場合、影はより鮮明になります。ぼかし値は 0 に設定できます。

カラー: 影の色を指します。RGBA カラーを使用できます。

たとえば、次のコードを使用して影の効果を設定できます。

text-shadow: 0 1px 1px #fff

上記のCSSグラデーションカラー省略マーク埋め込みフォントテキストシャドウの包括的な理解は、編集者が共有したすべての内容であり、参考になれば幸いです。 PHP中国語ウェブサイトでサポートされます。

CSS のグラデーションカラー、タグの省略、埋め込みフォント、テキストの影の詳細については、PHP 中国語 Web サイトの関連記事に注目してください。

関連記事:

HTML5 キャンバス: グラデーションカラーの描画

CSSボタンのグラデーションカラー

div+CSS背景のグラデーションカラーコード例