Une brève introduction à l'utilisation du découpage de clips en CSS

L'attribut clip est utilisé pour définir la forme de l'élément. Permet de clipser des éléments en position absolue (absolue ou fixe).

clip a trois valeurs : auto |inherit|rect. L'héritage est un héritage, IE ne prend pas en charge cet attribut, auto est la valeur par défaut. Les deux premiers sont essentiellement de la sauce soja, parlons principalement de l'attribut rect de clip.

attribut rect du clip : clip:rect(top, right, bottom, left) quatre valeurs d'attribut sont indispensables

ces quatre ; Comment une valeur d'attribut est-elle calculée ? Regardez d'abord l'image ci-dessous

le haut, la droite, le bas et la gauche du rectangle sont calculés en fonction du coin supérieur gauche

Jetons un coup d'œil à une petite démo

html :

<p id="demo">  
    <u class="c1"></u><u class="c2"></u>  
 </p>

css :

#demo { position: relative; border: 1px solid #ccc; width:140px; height: 140px; padding-top: 20px; }   
 #demo u { width: 128px;height: 128px; position: absolute; background: url(words.png) 0 -624px no-repeat;transition: all .5s ease-in-out 0s}   
 #demo p { text-align: center; line-height: 120px; background: url(words.png) 400px -624px no-repeat}   
 #demo .c1 { clip: rect(0,128px,0,64px);}   
 #demo .c2 { clip:rect(128px,64px,128px,0px)}   
 #demo:hover>.c1 {clip:rect(0px,128px,128px,64px)}   
 #demo:hover>.c2 {clip:rect(0px,64px,128px,0)}

Je suis un débutant, veuillez me corriger s'il y a des erreurs.

Un petit progrès chaque jour est une récompense.

L'article ci-dessus discutant brièvement de l'utilisation du découpage de clips en CSS est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère que vous soutiendrez le site Web PHP chinois.

Pour plus d'articles sur l'utilisation du découpage de clips en CSS, veuillez faire attention au site Web PHP chinois !