34

たとえば、白い文字があり、各文字に黒いアウトラインが必要だとします（これはテキストボックス全体のアウトラインとは異なります）。

このアウトラインを作成するためのコードは何ですか？

編集：残念ですが、私はドキュメント全体を求めているわけではありません。必要なのは、1行のコードと、テキストのアウトラインを作成するために必要なパラメーターだけです。コードを投稿する必要はありません。実際には単なるリクエストです。

使用してみtext-outline: 2px 2px #ff0000;ましたが、これは主要なブラウザではサポートされていません。

スコープ：

function createTitleLegend() {
    legendTitle = document.createElement('div');
    legendTitle.id = 'legendT';
    contentTitle = [];
    contentTitle.push('<h3><font size="16">TM</font></h3>');
    contentTitle.push('<p class="test"><br><font size="6" color=#000000>We have <b><font size="7" color="white" text-outline: 2px 2px #FF0000;>21421</font></b></font></p>');
    legendTitle.innerHTML = contentTitle.join('');
      legendTitle.index = 1;
}

フォント内のアウトライン、およびクラスとdivを使用してみました。動作しません。ブルートフォースアプローチも機能していないようです。

さらに別の編集：

これが私がアウトラインを求めているキーラインです。

contentTitle.push('<p class="test"><br><font size="6" color=#000000>We have <b><font size="7" color="white">21421</font></b> asdasd</font></p>');

アウトラインを適用する前に、文字列は1行で書き込まれます。アウトラインを適用すると、3行のテキストが表示されます。

contentTitleは、テキストの配置が中央にあるGoogleマップの凡例です。プッシュされているその文は、2つの異なるタイプのフォントを使用します。1つは単語用で、もう1つは数字用です。divを使用してテキストシャドウを適用すると、新しい行が作成されます。すべてを同じ行に保つための通常の解決策は、floatを使用することです。しかし、私が浮くと、もう何も中央に配置されません。

正しくフローティングしていない可能性がありますが、これまでdiv style=floatとclass="float"の両方を試しました。

4

6 に答える 6

67

from:アウトライン効果からテキストへ

.strokeme
{
    color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
}
于 2013-06-20T04:39:48.973 に答える
12

CSS3 Textshadow を試してみてください。

.box_textshadow {
     text-shadow: 2px 2px 0px #FF0000; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
}

css3please.com で試してみてください。

于 2012-07-04T07:50:21.817 に答える
0

css で text-shadow プロパティを使用できます。

.test {

  text-shadow: 0px 0px 0px red; /* red outline */

}

Note : The offsetX and offsetY properties are set to zero so that it will look like an outine. Any other numbers will make the outline move away, making the text look clumsy.

于 2021-10-02T05:03:36.760 に答える