這篇文章主要介紹了css中使用clip屬性的案例，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

專注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)吳川免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

css clip 屬性用來設(shè)置元素的形狀。用來剪裁絕對(duì)定位元素。當(dāng)一幅圖像的尺寸大于包含它的元素時(shí)，"clip" 屬性允許規(guī)定一個(gè)元素的可見尺寸，這樣此元素就會(huì)被修剪并顯示在這個(gè)元素中。

使用css clip屬性需要注意以下三點(diǎn)：

1.clip屬性只能用于絕對(duì)定位元素，position:absolute或fixed。

2.clip屬性有三種取值：auto  默認(rèn)的;inherit繼承父級(jí)的;一個(gè)定義好的形狀，但現(xiàn)在只能是方形的 rect(),clip: { shape | auto | inherit }

3.shape   rect(, , , )中的四個(gè)元素不可省略。

實(shí)例

原圖和頁(yè)面顯示圖片如下：

原圖

頁(yè)面顯示圖

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享css中使用clip屬性的案例內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)建站，詳細(xì)的解決方法等著你來學(xué)習(xí)!

本文名稱：css中使用clip屬性的案例-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://www.xueling.net.cn/article/dipeih.html