Lewati ke konten utama Lewati ke navigasi dokumen
in English

Bayangan

Tambahkan atau hapus bayangan ke elemen dengan utilitas bayangan kotak.

Contoh

Sementara bayangan pada komponen dinonaktifkan secara default di Bootstrap dan dapat diaktifkan melalui $enable-shadows, Anda juga dapat dengan cepat menambah atau menghapus bayangan dengan box-shadowkelas utilitas kami. Termasuk dukungan untuk .shadow-nonedan tiga ukuran default (yang memiliki variabel terkait untuk dicocokkan).

Tidak ada bayangan
Bayangan kecil
Bayangan biasa
Bayangan yang lebih besar
<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>

Kelancangan

Variabel

$box-shadow:                  0 .5rem 1rem rgba($black, .15);
$box-shadow-sm:               0 .125rem .25rem rgba($black, .075);
$box-shadow-lg:               0 1rem 3rem rgba($black, .175);
$box-shadow-inset:            inset 0 1px 2px rgba($black, .075);

API Utilitas

Utilitas bayangan dideklarasikan di API utilitas kami di scss/_utilities.scss. Pelajari cara menggunakan API utilitas.

    "shadow": (
      property: box-shadow,
      class: shadow,
      values: (
        null: $box-shadow,
        sm: $box-shadow-sm,
        lg: $box-shadow-lg,
        none: none,
      )
    ),