CSSを使用したテキストの発光効果の実装方法

2024-02-15 04:12 CSS テキスト発光効果

text-shadow プロパティを使用する方法:
```
.text-glow {
text-shadow: 0 0 10px #ff0000;
}
```
このコードでは、.text-glow クラスをテキスト要素に適用することで、赤色の発光効果が得られます。text-shadow の最後の値である 10px は、発光のぼかしの大きさを表します。
box-shadow プロパティを使用する方法:
```
.text-glow {
box-shadow: 0 0 10px #ff0000;
}
```
このコードでは、.text-glow クラスをテキスト要素に適用することで、テキストの周囲に赤色の発光効果が得られます。box-shadow の最後の値である 10px は、発光のぼかしの大きさを表します。
text-stroke プロパティを使用する方法:
```
.text-glow {
-webkit-text-stroke: 2px #ff0000;
-webkit-text-fill-color: transparent;
}
```
このコードでは、.text-glow クラスをテキスト要素に適用することで、テキストの周囲に赤色の発光効果が得られます。-webkit-text-stroke の値である 2px は、発光の太さを表します。

これらの方法を組み合わせたり、他の CSS プロパティと組み合わせたりすることで、さまざまな発光効果を実現することができます。試してみてください！