ホームページ > ウェブフロントエンド > フロントエンドQ&A > CSSでフォントに影効果を追加する方法

CSSでフォントに影効果を追加する方法

藏色散人
リリース: 2022-12-30 11:11:15
オリジナル
8554 人が閲覧しました

CSS でフォ​​ントに影効果を追加する方法: まず HTML サンプル ファイルを作成し、次に属性「text-shadow: 5px 5px 5px #FF0000;」を使用して指定したフォントに影効果を追加します。

CSSでフォントに影効果を追加する方法

このチュートリアルの動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

関連する推奨事項: 「css ビデオ チュートリアル

text-shadow プロパティは、テキストに影の効果を設定します。

構文:

text-shadow: h-shadow v-shadow blur color;
ログイン後にコピー

コメント: text-shadow プロパティは、テキストに 1 つ以上の影を追加します。このプロパティは、シェードのカンマ区切りのリストで、各シェードは 2 つまたは 3 つの長さの値とオプションの色の値で指定されます。省略された長さは 0 です。

プロパティ値:

h-shadow 必須。水平方向の影の位置。負の値も許可されます。

v-shadow 必須。垂直影の位置。負の値も許可されます。

ぼかし オプション。ぼやけた距離。

色 オプション。影の色。

例:

<!DOCTYPE html>
<html>
<head>
<style>
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
</style>
</head>
<body>
<h1>文本阴影效果!</h1>
</body>
</html>
ログイン後にコピー

レンダリング:

CSSでフォントに影効果を追加する方法

プログラミング関連の知識については、プログラミング教育をご覧ください。 ! !

以上がCSSでフォントに影効果を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート