CSS3 テキスト効果
1. text-shadow屬性の使い方
text-shadow屬性の使い方は以下の通りです。
text-shadow:length length length color
このうち、最初の3つの長さは、テキストからの影の水平方向の距離、テキストからの影の垂直方向の距離、および影のぼかし半徑を指します。影の色に。
以下は text-shadow 屬性の使用例です。この例では、赤いテキストのブロックがグレーの網(wǎng)掛けで表示されます。影とテキスト間の水平距離と垂直距離は両方とも 5 ピクセルです。
.wrap{ text-shadow:5px 5px 5px gray; color:red;font-size:50px; font-weight:bold; }
2. 複數(shù)の影を指定する
text-shadow 屬性を使用して、テキストに複數(shù)の影を指定し、各影に異なる色を使用できます。
複數(shù)のシャドウを指定する場合は、カンマを使用して複數(shù)のシャドウを區(qū)切ります。今のところ、この機能をサポートしているのは Firefox、Chrome、Opera ブラウザのみです。
サンプルコード
テキストのオレンジ、黃色、緑の影を順番に指定し、これらの影の適切な位置も指定します。
.wrap { text-shadow:10px 10px #f39800,40px 35px #fff100,70px 60px #c0ff00; color:navy; font-size:50px; font-weight:bold; }
ワードラップ
長すぎる?yún)g語は、特定の領(lǐng)域を超えて収まらない可能性があります:
CSS3 では、ワードラッププロパティを使用して、テキストを強制的に折り返すことができます - たとえそれが改行を意味するとしても単語は次のように分割され、次の行に包まれます。 punctuation は、句読點文字がワイヤーフレームの外側(cè)にあるかどうかを指定します。 3
Punctuation-TRIM は、句読點文字をトリムするかどうかを指定します。 3
text-justify は、text-align が「justify」に設(shè)定されている場合に使用される配置方法を指定します。 テキストアウトライン。 テキストオーバーフロー テキストシャドウ用 3
Text-wrap はテキストのテキストを指定します。 3
Word-Bream は、中國、日本、韓國語以外のテキストの交換に関するルールを規(guī)定しています。 3
ワードラップにより、長くて切り離せない単語を分割して次の行に切り替えることができます。 ???????????????????????????????????????????????????????????????????????????????????