CSS中的clip-path能夠讓你指定一個(gè)網(wǎng)頁(yè)元素的顯示區(qū)域，而不是缺省的顯示全部。在過去有個(gè)等效的屬性， clip，但在新的CSS規(guī)范中，它已經(jīng)被標(biāo)志為deprecated，用新的clip-path代替。

.clip-me {

/* 已被標(biāo)志為不推薦使用的寫法 */

position: absolute; /* 需要 absolute 和 fixed 定位 */

clip: rect(110px, 160px, 170px, 60px); /* 或 "auto" */

/* 值描述的是一個(gè) top/left 點(diǎn)和一個(gè) bottom/right 點(diǎn) */

/* 最新規(guī)范寫法 (沒有定位要求)， */

clip-path: inset(10px 20px 30px 40px); /* or "none" */

/* 值指的是 top, right, bottom, left 四個(gè)點(diǎn) */

}

這個(gè)CSS屬性大多被用在圖片上，但不限于此。你甚至可以將clip-path運(yùn)用到一個(gè)文章段落上，或者直接在文本上。

我將被裁剪

在clip-path的屬性值中的inset()函數(shù)中有四個(gè)值，分別表達(dá)著top/left和bottom/right四個(gè)點(diǎn)，圈出一個(gè)矩形面積。這個(gè)矩形面積外的部分都將被裁剪隱藏掉。

需要注意的是，數(shù)值中間是用空格分割的，而老式的是用逗號(hào)

從下面的演示中可以看到效果：

clip-path屬性的其它類型值:

.clip-me {

/* 引用一個(gè)內(nèi)聯(lián)的 SVG 路徑*/

clip-path: url(#c1);

/* 引用一個(gè)外部的 SVG 路徑*/

clip-path: url(path.svg#c1);

/* 多邊形 */

clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

/* 圓形 */

clip-path: circle(30px at 35px 35px);

/* 橢圓 */

clip-path: ellipse(65px 30px at 125px 40px);

/* inset-rectangle() 將會(huì)替代 inset() ? */

/* rectangle() 有可能出現(xiàn)于 SVG 2 */

/* 圓角 */

clip-path: inset(10% 10% 10% 10% round 20%, 20%);

}

SVG 裁剪路徑樣例：

總結(jié)

以上是生活随笔為你收集整理的css 剪辑图片_CSS中的clip-path裁剪图片用法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。