ホームページ > 記事 > ウェブフロントエンド > CSS3枠線の影を解除する方法
CSS3枠線の影を解除する方法
- WBOYオリジナル
- 2022-06-14 15:27:143294ブラウズ
CSS3 では、「box-shadow」属性を使用して境界線の影をキャンセルできます。この属性は、1 つ以上のドロップダウン シャドウ ボックスを設定するために使用されます。この属性の値を次のように設定するだけです。 「none」。要素の境界線の影をキャンセルできます。構文は「element {box-shadow: none;}」です。
このチュートリアルの動作環境: 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> 出力結果:
none を設定すると、出力結果は次のようになります:
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow:none;
}
</style>
</head>
<body>
<div></div>
</body>
(学習ビデオ共有: css ビデオ チュートリアル 、html ビデオ チュートリアル )
以上がCSS3枠線の影を解除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。