小編給大家分享一下CSS中裁剪屬性clip怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

任城網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)建站從2013年開始到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。

定義
一個(gè)絕對定位或固定定位元素通過使用屬性clip可以改變剪裁區(qū)域的形狀，但并不改變元素本身的寬高屬性

clip

值: rect(top,right,bottom,left) | auto | inherit

初始值: auto

應(yīng)用于: 絕對定位或固定定位元素

繼承性: 無

[注意]默認(rèn)值auto表示元素的內(nèi)容不應(yīng)剪裁

rect
clip:rect(top,right,bottom,left)中的值不是邊偏移，而是距元素左上角的距離。具體來說，就是top和bottom是表示距離元素上邊界的距離；left和right是距離元素元素左邊界的距離。這里元素的邊界指元素邊框外側(cè)。

rect(...)的語法與CSS的其他語法相比不太一樣。原因是它基于早期的定位草案，而該草案使用了左上偏移機(jī)制。在CSS2之前，實(shí)現(xiàn)這個(gè)語法的IE已經(jīng)成為完備推薦，于是標(biāo)準(zhǔn)從邊偏移修改成適用這個(gè)實(shí)現(xiàn)。但是，這意味著如果高度和寬度沒有明確定義，將無法設(shè)置一致的剪裁區(qū)域。

[注意]IE7-瀏覽器不支持rect(top,right,bottom,left)，支持的寫法是rect(top right bottom left)；而其他瀏覽器兩種寫法都支持

clip:rect(...)只允許長度值和auto，不允許有百分?jǐn)?shù)。如果設(shè)置為auto，則相當(dāng)于將剪裁邊界設(shè)置為適當(dāng)?shù)膬?nèi)容邊界。對于top或left設(shè)置auto，相當(dāng)于值為0；對于right或bottom設(shè)置auto，相當(dāng)于值為水平方向的寬度和或垂直方向的高度和

[注意]該元素水平方向或垂直方向的clip區(qū)域的邊界是外框外側(cè)，不包括outline

應(yīng)用
1.隱藏效果

當(dāng)clip:rect(top,right,bottom,left)中的top>=bottom，或者left>=right時(shí)，可實(shí)現(xiàn)元素的隱藏效果，效果類似于visibility:hidden;

2.雪碧圖定位
css sprite

定義：css sprite是一種網(wǎng)頁圖片應(yīng)用處理方式，它允許將一個(gè)頁面涉及到的所有零星圖片都包含到一張大圖中

優(yōu)點(diǎn)：
[1]減少http請求次數(shù)
[2]減少圖片大小，提升網(wǎng)頁加載速度 (多張圖片加載速度小于拼合成的圖片的加載速度)

缺點(diǎn)：
[1]提高開發(fā)成本
[2]提高維護(hù)成本

它能合并的只能是用于背景的圖片：
[1]對于設(shè)置的圖片，是不能合并到大圖的，如果合并這些圖片會影響頁面可讀性，語義化降低且可調(diào)整的范圍小。
[2]對于橫向和縱向都平鋪的圖片，也不能使用css cprite,如果是橫向平鋪的，只能將所有橫向平鋪的圖合并成一張大圖，只能豎直排列，不能水平排列；如果是縱向平鋪的，我們只能將所有縱向平鋪的圖合并成一張大圖，只能水平排列，不能豎直排列。

css sprite允許將一個(gè)頁面涉及到的所有零星圖片都包含到一張大圖中，然后利用background-position來顯示應(yīng)該顯示的區(qū)域。
而如果使用clip也可以實(shí)現(xiàn)同樣的效果。

div{   
    height:128px;   
    overflow: hidden;   
}   
img{   
    position:absolute;   
    background-color: rgba(0,255,0,0.5);   
    clip:rect(0,auto,128px,0);   
}   
img:hover{   
    margin-top: -128px;   
    clip:rect(128px,auto,auto,0);   
}   
  
   
           

3.歌詞演示效果

利用clip和background-clip實(shí)現(xiàn)歌詞演示效果，實(shí)際上通過改變寬度也可以實(shí)現(xiàn)，主要用于拓展思路。

@keyframes loop{   
    0%{   
        clip:rect(0,0px,100px,0);   
    }   
    100%{   
        clip:rect(0,520px,100px,0);   
    }   
}   
.show,.con{   
    width: 520px;   
    height: 100px;   
    line-height: 100px;   
    font-size: 30px;   
    position:absolute;   
    background-color: lightgreen;   
  
}   
.con{   
    animation: loop 6s linear infinite;   
    -webkit-background-clip: text;   
    color: red;   
}       
  
我曾經(jīng)跨過山和大海，也穿過人山人海