CSSシャドウの書き方-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSシャドウの書き方

青灯夜游

Jul 15, 2021 pm 05:15 PM

css影

影の書き方: 1. テキストシャドウ「text-shadow: h-shadow v-shadow ブラーカラー;」; 2. ボーダーシャドウ「box-shadow: h-shadow v-shadow ブラースプレッドカラーインセット」 ; "。

CSSシャドウの書き方

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

1. CSS テキストシャドウの書き方

CSS では、text-shadow 属性を使用して影付きのテキストを実装できます。シャドウテキストです。

構文

text-shadow: h-shadow v-shadow blur color;

v-shadowぼかし#色注: text-shadow プロパティは、1 つ以上のシャドウテキストを接続します。プロパティはシャドウで、2 つまたは 3 つごとの長さの値と、オプションの色の値をカンマで区切って指定します。期限切れの長さは 0 です。例:

値	説明
h-shadow# ＃＃＃＃＃＃＃＃必須。水平方向の影の位置。負の値も許可されます。
必須。垂直影の位置。負の値も許可されます。
オプション。ぼやけた距離。
オプション。影の色。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css设置文本阴影效果</title> 
        <style> 
            h1 { 
                color: red; 
                text-shadow: 3px 5px 5px #656B79; 
            }
        </style> 
    </head> 
    <body> 
        <h1 id="文本阴影">文本阴影！</h1>
    </body> 
</html>

レンダリング:

2. CSS ボーダーシャドウの書き方 CSSシャドウの書き方

#CSS では、box-shadow 属性を使用して境界線のシャドウ効果を実現できます。box-shadow 属性は 1 つ以上のドロップダウンシャドウボックスを設定できます。

構文

box-shadow: h-shadow v-shadow blur spread color inset;

値

説明#スプレッド#color#インセットオプション。 (まず) シャドウを外側のシャドウから内側のシャドウに変更します。例:

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				width: 300px;
				height: 100px;
				background-color: #ff9900;
				-moz-box-shadow: 10px 10px 5px #888888;
				/* 老的 Firefox */
				box-shadow: 10px 10px 5px #888888;
			}
		</style>
	</head>
	<body>

		<div>边框阴影</div>

	</body>
</html>

	h-shadow# ＃＃＃＃＃＃＃＃必須。水平方向の影の位置。負の値も許可されます
v-shadow	必須。垂直影の位置。負の値が許可されます
#ぼかし#オプション。ファジー距離
オプション。影のサイズ
はオプションです。影の色。
	注: boxShadow プロパティは、ボックスに 1 つ以上のドロップシャドウを追加します。このプロパティは、シェードのカンマ区切りリストであり、各シェードは 2 ～ 4 個の長さの値、オプションのカラー値、およびオプションの inset キーワードによって指定されます。省略された長さの値は 0 です。
レンダリング:

(学習ビデオ共有:

css ビデオチュートリアル

)

以上がCSSシャドウの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

非常に多くの色のリンクApr 13, 2025 am 11:36 AM

最近の色に関するツール、記事、リソースの実行がありました。あなたの楽しみのためにここにそれらを丸くすることで、私がいくつかのタブを閉じてもらいましょう。

FlexBoxでの自動マージンの仕組みApr 13, 2025 am 11:35 AM

ロビンは以前にこれをカバーしたことがありますが、私は過去数週間でそれについての混乱を聞いて、他の人がそれを説明することに刺されたのを見ました、そして私は望んでいました

動く虹色の下線Apr 13, 2025 am 11:27 AM

サンドイッチサイトのデザインが大好きです。多くの美しい特徴の中には、これらの見出しがあり、レインボーの下線が下線を描いて、スクロールするときに動きます。そうではありません

新年、新しい仕事？グリッド駆動の履歴書を作成しましょう！Apr 13, 2025 am 11:26 AM

多くの人気のある履歴書設計は、グリッド形状にセクションを配置することにより、利用可能なページスペースを最大限に活用しています。 CSSグリッドを使用して、レイアウトを作成しましょう

リロードしすぎるという習慣からユーザーを分解する1つの方法Apr 13, 2025 am 11:25 AM

ページのリロードは何かです。ページが反応しないと思われるとき、または新しいコンテンツが利用可能であると信じるときにページを更新することもあります。時々私たちはただ怒っています

Reactを使用したドメイン駆動型のデザインApr 13, 2025 am 11:22 AM

Reactの世界でフロントエンドアプリケーションを整理する方法に関するガイダンスはほとんどありません。（「正しいと感じる」までファイルを移動するだけです笑）。真実

非アクティブユーザーの検出Apr 13, 2025 am 11:08 AM

ほとんどの場合、ユーザーがアプリケーションに積極的に関与しているのか、一時的に非アクティブであるかを本当に気にしません。非アクティブ、意味、おそらく彼ら

Wufoo ZapierApr 13, 2025 am 11:02 AM

Wufooは常に統合に優れています。キャンペーンモニター、MailChimp、TypeKitなどの特定のアプリと統合されていますが、

See all articles

ホットAIツール

ホットツール

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。