Sifa box-shadow

Sifa box-shadow huweka kivuli cha kuta. Kama thamani, sifa hukubali 6 vigezo, vinavyotajwa kwa nafasi, au neno kuu none, linaloondoa kivuli kabisa.

Kisarufi

csskichagua {
  box-shadow: inset usogeaji_x usogeaji_y ufumweji ukubwa_wa_kivuli rangi;
}

csskichagua {
  box-shadow: none;
}

Vigezo

Kigezo	Maelezo
`inset`	Kigezo kisicholazimika. Kikipewa, kivuli kitakuwa ndani ya kontena, kisisipotolewa - nje.
usogeaji kwa x	Huamua usogeaji wa kivuli kwenye mhimili X. Thamani chanya husogeza kulia, hasi - kushoto.
usogeaji kwa y	Huamua usogeaji wa kivuli kwenye mhimili Y. Thamani chanya husogeza chini, hasi - juu.
ufumweji	Huamua ufumweji wa kivuli. Kadiri thamani inavyoongezeka ndivyo kivuli kinavyokuwa kifumefume. Kigezo kisicholazimika. Kisisipotolewa - kivuli kitakuwa wazi.
ukubwa wa kivuli	Huamua ukubwa wa kivuli. Thamani chanya huinyosha kivuli, thamani hasi, kinyume chake, huikandamiza. Kigezo kisicholazimika. Kisisipotolewa - kivuli kitakuwa cha ukubwa sawa na kipengele.
rangi	Huamua rangi ya kivuli kwa vipimo vyovyote vya rangi. Kigezo kisicholazimika. Kisisipotolewa - rangi ya kivuli inafanana na rangi ya maandishi.

Usogeaji kwenye mihimili, ufumweji na ukubwa wa kivuli hutolewa kwa vipimo vyovyote vya ukubwa, isipokuwa asilimia.

Mfano

Katika mfano huu, kivuli kimesogezwa chini na kulia na ufumweji mdogo umeongezwa:

html<div id="elem"></div>

css#elem {
  box-shadow: 5px 5px 3px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

Mfano . Kivuli wazi

Katika mfano huu, kivuli kimesogezwa chini na kulia, lakini hakuna ufumweji (kivuli kitakuwa wazi):

html<div id="elem"></div>

css#elem {
  box-shadow: 2px 2px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

Mfano . Kivuli sawasawa

Katika mfano huu, kivuli hakijasogezwa, lakini ufumweji umeongezwa kwake:

html<div id="elem"></div>

css#elem {
  box-shadow: 0px 0px 3px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

Mfano . Ukubwa wa kivuli

Katika mfano huu, kivuli hakijasogezwa, ufumweji ni sifuri, lakini ukubwa umeongezwa kwake (nyeusi ni mipaka, nyekundu ni kivuli):

html<div id="elem"></div>

css#elem {
  box-shadow: 0 0 0 3px red;
  border: 3px solid black;
  width: 300px;
  height: 50px;
}

Результат:

Mfano . Ufumweji + ukubwa wa kivuli

Katika mfano huu, kivuli hakijasogezwa, lakini ufumweji na ukubwa wameongezwa kwake (nyeusi ni mipaka, nyekundu ni kivuli):

html<div id="elem"></div>

css#elem {
  box-shadow: 0 0 3px 3px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

Mfano . Kivuli cha ndani

Katika mfano huu, kivuli kiko ndani ya kontena:

html<div id="elem"></div>

css#elem {
  box-shadow: inset 0 0 6px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

Angalia pia

sifa text-shadow,
ambayo huweka kivuli kwa maandishi