Brief introduction to Clip clipping usage in CSS

Source: Internet
Author: User
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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.