ホームページ > 記事 > ウェブフロントエンド > CSSで境界線の影効果を設定する方法
CSSで境界線の影効果を設定する方法
- 青灯夜游オリジナル
- 2021-05-19 13:54:0213480ブラウズ
CSS では、box-shadow 属性を使用して境界線に 1 つ以上の影を追加し、境界線の影効果を設定できます。構文形式は「box-shadow: 水平方向の影 垂直方向の影 ぼかし半径 拡張半径」です。 shadow color inset "; inset 値は外側の影を内側の影に変更するために使用され、省略できます。
このチュートリアルの動作環境: 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>レンダリング:
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 までご連絡ください。
前の記事：CSSで表の枠線の色を設定する方法次の記事：CSSで表の枠線の色を設定する方法