ホームページ > 記事 > ウェブフロントエンド > CSSでのボーダーシャドウ（box-shadow）の実装方法の紹介（コード例）

CSSでのボーダーシャドウ（box-shadow）の実装方法の紹介（コード例）

不言オリジナル: 2018-11-09 10:34:314215ブラウズ

この記事で共有した内容はCSSでボーダーシャドウを実現する方法ですので、困っている方は参考にしてください。

境界線に影を追加するために必要なのは、box-shadow 属性です。box-shadow 属性の構文形式を見てみましょう。
## box-shadow: (水平方向の距離) (垂直方向の距離) (影のぼかし) (影のサイズ) (影の色) (影の方向);影のぼかし) (影のサイズ) (影の色) (影の方向) は省略するか、次の形式を使用できます。 (関連する推奨事項:

CSS 学習マニュアル

)

box-shadow: (水平方向の距離) (垂直方向の距離);# #box -shadow: (水平方向の距離) (垂直方向の距離) (ぼやけた影);

box-shadow: (水平方向の距離) (垂直方向の距離) ) (ぼやけた影) (影のサイズ);

box-shadow: (水平方向の距離) (垂直方向の距離) (影のぼかし) (影の色);

box -shadow: (水平方向の距離) (垂直方向の距離) (影のぼかし) (影のサイズ) (影の色);

box-shadow: (水平方向の距離) (垂直方向の距離) (影のぼかし) (影の色) (影の方向)

構文例:

box-shadow：5px 5px 3px 1px＃000000 inset;

を見てみましょう。コード例の詳細:

SimpleShadow.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" type="text/css" href="SimpleShadow.css" />
</head>
<body>
  <div class="SimpleFrame">php中文网</div>
  </body>
  </html>

SimpleShadow.css

body {
  background-color:#C0C0C0;
}
.SimpleFrame {
  background-color: #FFFFFF;  
  margin-left: 128px;  
  margin-top: 64px;  
  width: 128px;  
  height: 220px;  
  box-shadow: 4px 4px 5px #404040;
}

効果は次のとおりです:

シャドウ効果はDIVのコンテナに移動し、影を表示します。

影のぼかし具合を設定する場合は、CSSコードを以下のように変更します。

SimpleShadow.css

body {
  background-color:#C0C0C0;
  }
.SimpleFrame {
  background-color: #FFFFFF;  
  margin-left: 128px;  
  margin-top: 64px;  
  width: 128px;  
  height: 220px;  
  box-shadow: 4px 4px 0px #808080;
  }

効果は次のとおりです。

「box-shadow: 4px 4px 4px」を設定した場合#808080; ”

CSSでのボーダーシャドウ（box-shadow）の実装方法の紹介（コード例）

「box-shadow: 4px 4px 16px #808080;」#808080;”#808080;”の場合、数値が大きいほど輪郭がぼやけます。影とディスプレイより柔らかい色合い。

CSSでのボーダーシャドウ（box-shadow）の実装方法の紹介（コード例）

影のサイズを設定します

SimpleShadow.css

body {
  background-color:#C0C0C0;
}
.SimpleFrame {
  background-color: #FFFFFF;  
  margin-left: 128px;  
  margin-top: 64px;  
  width: 128px;  
  height: 220px;  
  box-shadow: 4px 4px 5px 10px #404040;
}

影のサイズを指定すると、影は外部で指定したサイズで表示すると、効果は次のようになります。 CSSでのボーダーシャドウ（box-shadow）の実装方法の紹介（コード例）

影の方向の設定

#CSS コードは次のとおりです。

body {
  background-color:#C0C0C0;
}
.SimpleFrame {
  background-color: #FFFFFF;  
  margin-left: 128px;  
  margin-top: 64px;  
  width: 128px;  
  height: 220px;  
  box-shadow: 4px 4px 5px #404040 inset;
}

効果は以下の通りです: 枠内に影が表示されます

CSSでのボーダーシャドウ（box-shadow）の実装方法の紹介（コード例）

影の色の設定

box-shadowの影の色を指定します。

body {
  background-color:#C0C0C0;
  }
.SimpleFrame {
  background-color: #FFFFFF;  
  margin-left: 128px;  
  margin-top: 64px;  
  width: 128px;  
  height: 220px;  
  box-shadow: 2px 2px 10px #ff6a00;
  }

効果は次のとおりです。影に色がついて表示されます。

CSSでのボーダーシャドウ（box-shadow）の実装方法の紹介（コード例）

この記事はここで終了です。CSS の詳細については、PHP 中国語 Web サイトの

CSS ビデオチュートリアル

コラムをご覧ください。！！

以上がCSSでのボーダーシャドウ（box-shadow）の実装方法の紹介（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php css

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSSのflex-grow属性の使い方を詳しく解説（コード付き）次の記事：CSSのflex-grow属性の使い方を詳しく解説（コード付き）

続きを見る