MENU
  1. ホーム
  2. CSS
  3. box-shadow

box-shadow

CSS
2023.12.24

box-shadowプロパティは、要素に影を付けるために使用されます。

box-shadowの説明図
box-shadowプロパティ
記法

.クラス名　{
　box-shadow：オフセット(水平・垂直)　ぼかし半径　広がり　色　固定値(なしでも良い);
}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>box-shadowプロパティに関して</title>
  </head>

  <body>
    <p>box-shadow(水平方向)</p>
    <div class="box-shadow1"></div>
    <hr>
    <p>box-shadow(垂直方向)</p>
    <div class="box-shadow2"></div>
    <hr>
    <p>box-shadow(ぼかし半径)</p>
    <div class="box-shadow3"></div>
    <hr>
    <p>box-shadow(広がり)</p>
    <div class="box-shadow4"></div>
    <hr>
    <p>box-shadow(影を表示しない)</p>
    <div class="box-shadow-none"></div>
    <hr>
    <p>box-shadow(内側に影を表示する)</p>
    <div class="box-shadow-inset"></div>
  </body>
</html>
div {
  margin: 20px;
  width: 200px;
  height: 50px;
}
.box-shadow1 {
  border: solid 1px black;
  box-shadow: 10px 0px 0px 0px rgba(0, 0, 0, 0.3);
}
.box-shadow2 {
  border: solid 1px black;
  box-shadow: 0px 10px 0px 0px rgba(0, 0, 0, 0.3);
}
.box-shadow3 {
  border: solid 1px black;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}
.box-shadow4 {
  border: solid 1px black;
  box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.3);
}
.box-shadow-none {
  border: solid 1px black;
  box-shadow: none;
}
.box-shadow-inset {
  border: solid 1px black;
  box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.3) inset;
}
出力結果

box-shadow(水平方向)

box-shadow(垂直方向)

box-shadow(ぼかし半径)

box-shadow(広がり)

box-shadow(影を表示しない)

box-shadow(内側に影を表示する)

CSS