CSS3枠線の影を解除する方法-フロントエンドQ&A-php.cn

CSS3枠線の影を解除する方法

WBOY

リリース： 2022-06-14 15:27:14

オリジナル

3337 人が閲覧しました

CSS3 では、「box-shadow」属性を使用して境界線の影をキャンセルできます。この属性は、1 つ以上のドロップダウンシャドウボックスを設定するために使用されます。この属性の値を次のように設定するだけです。「none」。要素の境界線の影をキャンセルできます。構文は「element {box-shadow: none;}」です。

CSS3枠線の影を解除する方法

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

css3 境界線の影をキャンセルする方法

box-shadow プロパティでは、1 つ以上のドロップダウンシャドウボックスを設定できます。

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

ログイン後にコピー

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

h-shadow 必須。水平方向の影の位置。負の値が許可されます
#v-shadow 必須。垂直影の位置。負の値も許可されます
blur オプション。ファジー距離
#スプレッドオプション。影のサイズ
#カラーはオプションです。影の色。
インセットオプション。影を外側の影（先頭）から内側の影に変更します。

例は次のとおりです。

<style> 
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>

ログイン後にコピー

出力結果:

CSS3枠線の影を解除する方法

none を設定すると、出力結果は次のようになります:

<style> 
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow:none;
}
</style>
</head>
<body>
<div></div>
</body>

ログイン後にコピー

CSS3枠線の影を解除する方法

(学習ビデオ共有: css ビデオチュートリアル、html ビデオチュートリアル )

以上がCSS3枠線の影を解除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。