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

WBOY
リリース: 2022-06-14 15:27:14
オリジナル
3311 人が閲覧しました

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

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート