Brief introduction to Clip clipping usage in CSS

The clip property is used to set the shape of an element. Used to trim an absolutely positioned element (absolute or fixed).

There are three types of clip values:auto |inherit|rect. Inherit is inherited, IE does not support this property, auto is the default first two basic belongs to soy sauce, we mainly say clip's Rect property.

the Rect property of clip: clip:rect (top,right,bottom,left) Four attribute values are indispensable;

How exactly are these four attribute values calculated? Look at this picture below.

The top,right,bottom,left of a rect is calculated based on the upper left corner.

Let's see a little demo.

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. 5 s 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)}

A novice, if there is a mistake, please correct me.

A little progress every day is a harvest.

This article on the CSS clip clipping usage is a small part of the whole content to share to everyone, I hope to give you a reference, but also hope that we support topic.alibabacloud.com.