影効果は通常、オブジェクトに当たる光の感覚を表現するために使用されます。図 5.19 に示すように、テキストの光と影の効果を作成する場合は、背景の線形グラデーションを使用して作成できます。図 5.19 では、テキストを照らすビームに似た効果があり、テキストが強調表示されていることがわかります。これは非常に簡単に実装でき、テキストを中央に配置し、背景要素の中央から放射状のグラデーションを設定するだけです。コードは次のとおりです。光と影の背景効果が完成します。色を調整すると、白に近づくほど明るくなります。図 5.20 に示すように、中心色が占める割合を調整して、ハロー効果の範囲を調整します。
図 5.20 ハロー効果の調整
画像と比較して、開発者は CSS コード内のパラメータを直接調整して効果を変更できるため、柔軟性と開発速度が大幅に向上します。
学びたい人とコミュニケーションを取ろう
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
