CSS box-reflect 属性

ការអធិប្បាយ និងការប្រើប្រាស់

box-reflect កត្តាត្រូវបានប្រើសំរាប់បង្កើតឥទ្ធិពលរបស់សញ្ញាកម្ម

box-reflect តម្លៃរបស់កត្តានឹងអាចជាប់:

  • below（ខាងក្រោម）
  • above（ខាងលើ）
  • left（ខាងឆ្វេង）
  • right（ខាងស្តាំ）

ការពិចារណា：box-reflect កត្តាលក្ខណៈមិនជាស្តង់ដាច់ ត្រូវតែប្រើ -webkit- ផ្តុកមុខ

ឧទាហរណ៍

Talaksan 1

Magdagdag ng epekto ng reflection sa ibaba ng imahe:

img {
  -webkit-box-reflect: below;
}

Subukan nang sarili

Talaksan 2

box-reflect Ang katangian ay maaaring gamitin sa anumang nakikitang HTML elemento. Ang halimbawa ay maglikha ng epekto ng reflection sa ibaba ng <p> tag:

p {
  -webkit-box-reflect: below;
}

Subukan nang sarili

Talaksan 3

box-reflect Ang katangian ay maaaring gamitin ang dalawang halaga ng pangungusap. Ang halimbawa sa ibaba ng imahe ay maglikha ng epekto ng reflection, nagtatakda ng 70px na layo:

img {
  -webkit-box-reflect: below 70px;
}

Subukan nang sarili

Talaksan 4

box-reflect Ang katangian ay maaaring gamitin ang tatlong halaga ng pangungusap. Ang halimbawa sa ibaba ng imahe ay maglikha ng epekto ng reflection, nagtatakda ng 10px na layo, at nagbabuwal nang pagkalat:

img {
  -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}

Subukan nang sarili

Pangungusap ng CSS

box-reflect: none|below|above|left|right|position offset gradient|initial|inherit;

Halaga ng katangian

Halaga Paglalarawan
none Default Value. Hindi ipapakita ang epekto ng reflection.
below Maglikha ng epekto ng reflection sa ibaba ng elemento.
above Maglikha ng epekto ng reflection sa itaas ng elemento.
left Maglikha ng epekto ng reflection sa kaliwang bahagi ng elemento.
right Maglikha ng epekto ng reflection sa kanang bahagi ng elemento.
position offset

Dalawang halaga ng pangungusap:

  • position I-set ang lokasyon ng reflection (below, above, left, o right).
  • offset I-set ang layo ng reflection. Ang layo ay maaaring gamitin ang mga yunit tulad ng px, pt, cm, atbp. Ang default ay 0.
position offset gradient

Tatlong halaga ng pangungusap:

  • position I-set ang lokasyon ng reflection (below, above, left, o right).
  • offset I-set ang layo ng reflection. Ang layo ay maaaring gamitin ang mga yunit tulad ng px, pt, cm, atbp. Ang default ay 0.
  • gradient I-set ang transisyon ng pagkakaroon ng reflection, halimbawa ang pagbubuwal.
initial I-set ang katangian sa kanyang default na halaga. Tingnan ang: initial.
inherit Makatarungan mula sa magulang elementong ito ang katangian. Tingnan ang: inherit.

Detalye ng Teknolohiya

Default Value: none
Inherits: Hindi
Paggawa ng animasyon: Hindi suportado. Tingnan ang:Katangian ng animasyon.
Bersyon: CSS3
Mga pangungusap ng JavaScript: object.style.webkitBoxReflect="below"

Suporta ng Browser

Ang bilang sa talahanapan ay nagpapakita ng unang bersyon ng browser na ganap na sumusuporta sa katangian.

Ang bilang sa unang suportadong bersyon ng prefixo -webkit-.

Chrome Edge Firefox Safari Opera
4.0 -webkit- 79.0 -webkit- Hindi suportado 4.0 -webkit- 15.0 -webkit-