DIV CSS 佈局教程網

目錄

前面的話

　　CSS裁剪clip這個屬性平時用的不多，但其實它並不是CSS3的新屬性，很早就開始出現了。本文將介紹關於clip屬性的相關知識

定義

　　一個絕對定位或固定定位元素通過使用屬性clip可以改變剪裁區域的形狀，但並不改變元素本身的寬高屬性

clip

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

　　初始值: auto

　　應用於: 絕對定位或相對定位元素

　　繼承性: 無

　　[注意]默認值auto表示元素的內容不應剪裁

rect

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

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

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

　　clip:rect(...)只允許長度值和auto，不允許有百分數。如果設置為auto，則相當於將剪裁邊界設置為適當的內容邊界。對於top或left設置auto，相當於值為0；對於right或bottom設置auto，相當於值為水平方向的寬度和或垂直方向的高度和

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

應用

【1】隱藏效果

　　當clip:rect(top,right,bottom,left)中的top>=bottom，或者left>=right時，可實現元素的隱藏效果，效果類似於visibility:hidden;

【2】雪碧圖定位

　　css sprite是一種網頁圖片應用處理方式，它允許將一個頁面涉及到的所有零星圖片都包含到一張大圖中，然後利用background-position來顯示應該顯示的區域。關於CSS Sprite的詳細信息移步至此。而如果使用clip也可以實現同樣的效果。

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

<div>
    <img src="http://hovertree.com/hvtimg/bjafjc/lsiu1fil.png" alt="測試圖片">    
</div>

【3】歌詞演示效果

　　利用clip和background-clip實現歌詞演示效果，實際上通過改變寬度也可以實現，主要用於拓展思路。

@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;
}    

<div class="show">想問候不知從何問起,何問起很愛很愛你</div>
<div class="con">>想問候不知從何問起,何問起很愛很愛你</div>