Cara Membuat Box Shadow

Outer box-shadow melemparkan bayangan seolah-olah batas-box elemen yang buram. Dengan asumsi jarak penyebaran nol, perimeter memiliki ukuran yang sama persis dan bentuk sebagai box perbatasan. Shadow itu diambil di luar hanya ujung perbatasan: itu dipotong dalam perbatasan-box dari elemen. Inner box-shadow melemparkan bayangan seolah-olah segala sesuatu di luar padding tepi yang buram. Dengan asumsi jarak penyebaran nol, perimeter memiliki ukuran yang sama persis dan bentuk sebagai box padding. Shadow itu diambil dalam hanya tepi padding: itu terpotong luar box bantalan elemen.  Spread distance didefinisikan, perimenter shadow didefinisikan di atas diperluas ke luar (untuk luar box-shadow) atau dikontrak ke dalam (Inner box-shadow) dengan outsetting (insetting, untuk shadow inner) tepi lurus shadow oleh jarak spread (dan lantai sehingga lebar / tinggi di nol).

Berikut adalah beberapa contoh dari kotak kuning dengan perbatasan orange diberi drop shadow.

Example code 1

<style>
.box{
border: 5px solid orange;
background-color: yellow;
width: 100px;
height: 100px;
box-shadow:
  rgba(0,0,0,0.4)
  10px 10px;
}
</style>
<div class='box'></div>

code 1

Example code 2

<style>
.box{
border: 5px solid orange;
background-color: yellow;
width: 100px;
height: 100px;
box-shadow:
  rgba(0,0,0,0.4)
  10px 10px inset;
}
</style>
<div class='box'></div>

code 2

Example code 3

<style>
.box{
border: 5px solid orange;
background-color: yellow;
width: 100px;
height: 100px;
box-shadow:
  rgba(0,0,0,0.4)
  10px 10px 0
  10px /* spread */;
}
</style>
<div class='box'></div>

code 3

Example code 4

<style>
.box{
border: 5px solid orange;
background-color: yellow;
width: 100px;
height: 100px;
box-shadow:
  rgba(0,0,0,0.4)
  10px 10px 0
  10px  /* spread */
  inset;
}
</style>
<div class='box'></div>

code 4

Untuk melestarikan bentuk box ketika spread diterapkan, jari-jari sudut bayangan juga meningkat (menurun, untuk bayangan inner) dari perbatasan-box jari-jari dengan menambahkan spread distance (dan lantai nol). Namun, dalam rangka menciptakan sudut tajam ketika jari-jari perbatasan kecil, ketika jari-jari perbatasan kurang dari spread distance, spread distance dikalikan dengan proporsi 1 + (r-1) 3, di mana r adalah rasio radius perbatasan dengan spread distance, dalam menghitung jari-jari sudut bentuk penyebaran bayangan. Sebagai contoh, jika radius perbatasan 10px dan spread distance adalah 20px (r = 0,5), jari-jari sudut bentuk bayangan akan 10px + 20px × (1 + (0,5-1) 3) = 27.5px. Penyesuaian ini diterapkan secara independen dengan jari-jari pada setiap dimensi. 

The 'border-image' tidak mempengaruhi bentuk kotak-shadow.