CSS Clip Properties

The clip property is described in the Web site: " by cutting the elements to control the visible area of the element, by default, the element is not cut any, but it is also possible to cut the region also shows that the clip properties are set."

{    clip: <shape> | auto | Inherit}    

First of all, you should note that theclip property can only function if the element has the "Position:absolute" or "position:fixed" attribute set. clip cannot work on settings "Position:relative" and "position:static".

The syntax above tells us that the clip property accepts only three different property values:

1. <shape>: Shape is a function function when using only the rect () attribute;
2. Auto: This is a default value, clip settings auto value and no cut is the same effect;
3. inherit: Inherits the Clip property value of the parent element.

Most of the time, you might want to have more of the shape function functions, such as rect () and Circle (), but so far only the Rect () function can be used, but don't worry, this feature can help us make a lot of cool effects.

Rect () uses

Next, let's look at the rect () use method. Rect () requires four values to be set: top, right, bottom, and left. They need to be separated by commas, and the rect () attribute value has the same criteria as margin, padding, and Bodrder, followed by the trbl clockwise rotation rule.

Clip:rect (<TOP>, <right>, <bottom>, <left>);

In CSS2.1, the Rect () and <top> and <bottom> specified offsets are calculated from the top edge of the element box;<left> and <right> the specified offset is from the left edge of the element box ( Including borders ).

<top>, <right>, <bottom>, <left> you can set the value to "auto" or the length value <length>. And can also be filled with a negative length value. When the value is "Auto", the edge of the clipping region is the same as the edge of the element box. For example, when <top> and <left> are set to auto, they are equal to the top and left values of 0, andif <right> and <bottom> are set to auto, They are equivalent to the width of the element (this width includes the element's border, padding, and width), or simply understood as 100%.

Note: 1. The value cannot be set to a percentage. 2. Auto cannot be used during animation setup, no animation effect with auto.

Example Description:

. Fixedone{ Left:100px;Top:100px;background:Red;}. Fixedone img{position:Absolute;Border:5px Solid Blue; }/**ie8 and above browsers, GOOGLE,FF support the calculation of the * Cut section, including the border * description, cannot use the percentage setting*/    /*. Fixedone img {clip:rect (5px,auto,auto,0px); }*/    /*. Fixedone img {clip:rect (5px,auto,auto,10px); }*/. Fixedone img{Clip:rect (5px,105px,50px,2px);Clip:rect (5px 105px 50px 2px);/*IE87 and the following browser support, workaround*/}. Fixedone img{width:120%;Height:120%; }

Each status is displayed as follows:

More examples: http://www.cnblogs.com/tianma3798/p/5862162.html

Reference article: http://www.w3cplus.com/css3/clip.html

CSS Clip Properties