CSS中clip-path區(qū)域裁剪屬性怎么用
這篇文章主要為大家展示了“CSS中clip-path區(qū)域裁剪屬性怎么用”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS中clip-path區(qū)域裁剪屬性怎么用”這篇文章吧。
創(chuàng)新互聯(lián)主營三山網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶App定制開發(fā),三山h5小程序設(shè)計(jì)搭建,三山網(wǎng)站營銷推廣歡迎三山等地區(qū)企業(yè)咨詢
CSS中的clip-path能夠讓你指定一個(gè)網(wǎng)頁元素的顯示區(qū)域，而不是缺省的顯示全部。
.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) */
}在clip-path的屬性值中的inset()函數(shù)中有四個(gè)值，分別表達(dá)著top/left和bottom/right四個(gè)點(diǎn)，圈出一個(gè)矩形面積。這個(gè)矩形面積外的部分都將被裁剪隱藏掉。
需要注意的是，數(shù)值中間是用空格分割的，而老式的是用逗號。
.jpg)
例子：
看這個(gè)效果，對這個(gè)DIV進(jìn)行了裁剪。
代碼如下：
.haorooms-small {
background-size: cover;
width: 300px;
height: 300px;
-webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}clip-path的inset屬性應(yīng)用
.clip-me {
/* 最新規(guī)范寫法 (沒有定位要求)， */
clip-path: inset(10px 20px 30px 40px); /* or "none" */
/* 值指的是 top, right, bottom, left 四個(gè)點(diǎn) */
}
在clip-path的屬性值中的inset()函數(shù)中有四個(gè)值，分別表達(dá)著top/left和bottom/right四個(gè)點(diǎn)，圈出一個(gè)矩形面積。這個(gè)矩形面積外的部分都將被裁剪隱藏掉。
clip-path的其他屬性應(yīng)用
.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 裁剪路徑樣例：
以上是“CSS中clip-path區(qū)域裁剪屬性怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
名稱欄目：CSS中clip-path區(qū)域裁剪屬性怎么用
鏈接分享：
http://weahome.cn/article/ihjsoo.html
重慶分公司
重慶分公司
