CSSで境界線の影効果を設定する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSで境界線の影効果を設定する方法

青灯夜游

May 19, 2021 pm 01:54 PM

css

CSS では、box-shadow 属性を使用して境界線に 1 つ以上の影を追加し、境界線の影効果を設定できます。構文形式は「box-shadow: 水平方向の影垂直方向の影ぼかし半径拡張半径」です。 shadow color inset "; inset 値は外側の影を内側の影に変更するために使用され、省略できます。

CSSで境界線の影効果を設定する方法

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

CSS では、box-shadow 属性を使用して境界線のシャドウ効果を実現できます。このプロパティは、影のピクセルの長さ、幅、ぼかし距離、および影の色を設定します。

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div
{
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

レンダリング:

CSSで境界線の影効果を設定する方法

##説明:

ボックス-shadow プロパティは、ボックスに 1 つ以上の影を追加します。このプロパティは、シャドウのコンマ区切りのリストで、それぞれ 2 ～ 4 個の長さの値、オプションのカラー値、およびオプションの inset キーワードで指定されます。省略された長さの値は 0 です。

構文:

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

属性値:

h-shadow: シャドウの水平オフセットを指し、その値は正または負、正のいずれかになります。値、影はオブジェクトの右側にあります。負の値、影はオブジェクトの左側にあります。
v-shadow: 影の垂直オフセットを参照します。、その値は正または負の場合もあります。正の値の場合、影はオブジェクトの下部にあり、負の値の場合、影はオブジェクトの上部にあります。
blur: 影のぼかし半径; このパラメータはオプションであり、その値が 0 の場合は、影にぼかし効果がないことを意味します。値が大きいほど、影のエッジがぼかされます。
spread: シャドウ拡張半径; このパラメータはオプションであり、その値は正の負の値または正の値にすることができ、シャドウ全体が拡張され、それ以外の場合は縮小されます。
#color: 影の色; このパラメータはオプションです。色が設定されていない場合、ブラウザはデフォルトの色を選択しますが、各ブラウザのデフォルトの色は異なります、特に Webkit の safari および chrome ブラウザカーネルは無色、つまり透明になります。このパラメータは省略しないことをお勧めします。
inset : 内側のシャドウを設定して、外側のシャドウ (最初) から影を変更します。オプションの値は省略できます。
注: **影の複数のレイヤー。最も内側のレイヤーの優先順位が最も高く、その後、順番に優先順位が低くなります。

(学習ビデオ共有:

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ツール

ホットツール

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