3

css3 を使用してテキスト効果をコピーしようとしています

コピーしようとしているテキストの画像は次のとおりです。

ここに画像の説明を入力

これが私が今まで持っているものです：

h1 {

font-size:4em;  
color: #E6012F;

text-shadow:
      3px 3px 0 #888087,
     -1px -1px 0 #888087,  
      1px -1px 0 #888087,
      -1px 1px 0 #888087,
      1px 1px 0 #888087;

}

ここでの主な問題は、テキストの白いアウトラインをどのように行うかということです。

4

2 に答える 2

8

これらの影のすべてが必要なわけではありません。これだけで目的の効果を実現できます。

text-shadow: 1px 1px 1px #fff, 2px 2px 2px #111;

影の配置は、ステートメントで定義されたときの階層によって機能するため、最初に白い影を配置すると、灰色の影の上に重ねられ、境界線のように見えます。

また、白い境界線は影の上にのみ表示され、テキストの周囲には表示されないことにも注意してください。したがって、テキストを暗い背景に配置すると、単語の上部と左側に白い境界線が表示されなくなります。

于 2012-11-08T10:39:00.393 に答える