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

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

青灯夜游

リリース： 2023-01-06 11:14:12

オリジナル

13482 人が閲覧しました

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 サイトの他の関連記事を参照してください。