Clip and cssclip of css

Clip and cssclip of css

The clip attribute is used to set the shape of an element. Used to crop absolute positioning elements (absolute or fixed ).

Clip has three values: auto, inherit, and rect. Inherit is inheritance, and ie does not support this attribute. auto is the first two of them by default. we mainly discuss the rect attribute of clip.

Clip's rect attributes: clip: rect (top, right, bottom, left) Four attribute values are indispensable;

How are these four attribute values calculated? first look at the figure below.

 

Top, right, bottom, and left of rect are calculated based on the upper left corner.

Let's take a look at a demo.

Html:

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

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)}

Online Preview address: css-clip demo

 

A newbie. If you have any mistakes, please correct them.