影shadow 角丸rounded

影:Shadows


影なし(shadow-none)
小さめの影(shadow-sm)
標準の影(shadow)
大きめの影(shadow-lg)

  <div class="shadow-none p-3 mb-5 bg-light rounded">影なし(shadow-none)</div>
  <div class="shadow-sm p-3 mb-5 bg-light rounded">小さめの影(shadow-sm)</div>
  <div class="shadow p-3 mb-5 bg-light rounded">標準の影(shadow)</div>
  <div class="shadow-lg p-3 mb-5 bg-light rounded">大きめの影(shadow-lg)</div>

角丸:rounded


rounded rounded-top rounded-right rounded-bottom rounded-left rounded-circle rounded-0

  <!-- 背景色を設定しない限り適用されない、背景に適用される -->
  <span class="rounded bg-warning">rounded</span>
  <span class="rounded-top bg-warning">rounded-top</span>
  <span class="rounded-right bg-warning">rounded-right</span>
  <span class="rounded-bottom bg-warning">rounded-bottom</span>
  <span class="rounded-left bg-warning">rounded-left</span>
  <!-- サークル -->
  <span class="rounded-circle bg-warning">rounded-circle</span>
  <span class="rounded-0 bg-warning">rounded-0</span>