シャドウ

ボックスシャドウを追加または削除できます。

Examples

shadow(components) はデフォルトで無効になっており、 $enable-shadowsで有効にできますが、shadow 属性を使用して shadow を追加や削除することもできます。 shadow="none" と3つのデフォルトサイズ（一致する変数が関連付けられている）のサポートが含まれています。

No shadow
Small shadow
Regular shadow
Larger shadow
vue
<template>
 <b-div
  shadow="none"
  padding="3"
  margin="b-5"
  background-color="light"
  rounded
 >
  No shadow
 </b-div>
 <b-div
  shadow="sm"
  padding="3"
  margin="b-5"
  background-color="body"
  rounded
 >
  Small shadow
 </b-div>
 <b-div
  shadow
  padding="3"
  margin="b-5"
  background-color="body"
  rounded
 >
  Regular shadow
 </b-div>
 <b-div
  shadow="lg"
  padding="3"
  margin="b-5"
  background-color="body"
  rounded
 >
  Larger shadow
 </b-div>
</template>

See Also