Mafuta wa offset-path wa CSS

Maelezo na matumizi

offset-path Inaonyesha kina kinachotumia kwa kina kinachotumia njia ya uharibifu.

Mfano

Tumia njia ya uharibifu kwa kina <div>:

div {
  offset-path: path('M20,170 L100,20 L180,100 Z');
  animation: moveDiv 3s 3;
}
@keyframes moveDiv {
  100% { offset-distance: 100%; }
}

Jifunze kufanya matokeo

Makaeleza ya CSS

offset-path: none|path()|ray()|url()|basic-shape|cord-box|initial|inherit;

Chaguo cha kipaa

Chaguo Maelezo
none Chaguo cha kuzingatia. Chaguo cha kuzingatia cha offset-path cha kina.
path() Tumia maelezo ya SVG kusimamia njia. Tazama:Njia ya SVG.
ray() Tumia fungu ya CSS ray() kusimamia njia.
url() Tumia URL ya faili ya SVG kusimamia njia.
<basic-shape> Tumia mapokeo ya fungu ya CSS (kama inset(), circle(), ellipse au polygon()) kudumuisha muundo wa kawaida kusimamia njia.
<coord-box> Tumia koordinati ya ukubwa kusimamia njia.
initial Kuweka kipaa hiki kwa chaguo cha kuzingatia. Tazama: initial.
inherit Kutumia kina ya mababu kwa kusimamia hiyo kipaa. Tazama: inherit.

Vivutio ya teknolojia

Chaguo cha kuzingatia: none
Kuwasiliana: Hakuna
Kichora cha uharibifu: Inahusishwa. Tazama:Jicho la uharibifu.
Mwaka: CSS3
Makaeleza ya JavaScript: object.style.offsetPath="path('M20,170 L100,20 L180,100 Z')"

Kampuni ya kifungu

数字 katabeli kinachotabaliwa na sababu ya kusimamia kwa kawaida kwa kina kinachosimamia hiyo kipaa.

Chrome Edge Firefox Safari Opera
55 79 72 15.4 45

相关页面

Makao:Njia ya SVG

Makao:Hali ya CSS

Tazama:Mafuta wa offset wa CSS

Tazama:Mafuta wa offset-anchor wa CSS

Tazama:Mafuta wa offset-distance wa CSS

Tazama:Mafuta wa offset-position wa CSS

Tazama:Mafuta wa offset-rotate wa CSS