CSSでのボーダーシャドウ（box-shadow）の実装方法の紹介（コード例）-CSSチュートリアル-php.cn

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

不言

リリース： 2018-11-09 10:37:14

オリジナル

4240 人が閲覧しました

この記事で共有した内容は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）の実装方法の紹介（コード例）