CSS3_html/css_WEB-ITnose でテキスト ストロークを実装する

新しいフロントエンド テクノロジとして、CSS3 はテキスト ストロークなど、多くの複雑で変化する効果を実現できます。

text-shadow 属性は主にここで使用され、名前が示すように、テキストに影の効果を追加します。例:

text-shadow:10px 5px 2px #f60;  /*text-shadow:x位移 y位移 模糊程度 颜色 */

ここで、x 変位と y 変位は、テキストに対する影のオフセット値を表し、負の値になる場合があります。

アイデアは実際には非常にシンプルです。4 方向すべてにブラーがゼロの 1 ピクセルのシャドウを作成します。

-webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;  -moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;  text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;   *filter: Glow(Color=#000, Strength=1);  /*针对各主流浏览器做了适配的写法*/

原則として、text-shadow は多方向の影の書き込みをサポートしていますが、コードのコストが高すぎます。

からの転載