⌘K

Kazi ya drop-shadow

Kazi drop-shadow inaruhusu kuongeza kivuli kwenye picha ya asili.

Syntax

csskichaguzi {
  filter: drop-shadow(usogeaji kwa x, usogeaji kwa y, radius ya kufifia, rangi);
}

Thamani

Thamani Maelezo
usogeaji kwa x Uhamishaji wa kivuli kwa usawa ukilinganisha na asili. Nambari chanya inaashiria usogeaji wa kivuli kulia, nambari hasi - kushoto. Kigezo cha lazima.
usogeaji kwa y Uhamishaji wa kivuli kwa wima ukilinganisha na asili. Nambari chanya inaashiria usogeaji wa kivuli chini, nambari hasi - juu. Kigezo cha lazima.
kufifia Inaweka radius ya kufifia kwa kivuli. Kadiri thamani inavyokuwa kubwa, ndivyo kivuli kinavyofifia zaidi. Kigezo cha hiari. Kwa msingi ni sawa na 0.
rangi Rangi ya kivuli. Kigezo cha hiari. Kwa msingi rangi nyeusi ya kivuli huwekwa.

Mfano

Wacha tuweke kivuli cha bluu kwa picha yetu bila uhamishaji kwenye shoka, na kufifia kwa 5px: 

html<div id="elem"></div>
css#elem {
  filter: drop-shadow(0 0 5px #035470);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Tazama pia

  • kazi blur,
    ambayo inafifia asili
  • kazi brightness,
    ambayo inaweka mwangaza wa asili
  • kazi contrast,
    ambayo inaweka utofautishaji wa asili
  • kazi hue-rotate,
    ambayo inaweka rangi ya asili
  • kazi invert,
    ambayo inabadilisha upande rangi za asili
  • kazi opacity,
    ambayo inaweka uwazi wa asili
  • kazi sepia,
    ambayo inabadilisha asili kuwa sepia
  • sifa background,
    inayowakilisha sifa iliyofupishwa kwa asili
  • sifa background-image,
    ambayo kwa kutumia kizuizi kunaweza kupewa picha ya asili
BackKazi contrastNextKazi ya hue-rotate