CSS中的clip-path區域裁剪屬性使用教程

2024-07-11 08:32:46

字體：大中小

來源：轉載

供稿：網友

CSS中的clip-path能夠讓你指定一個網頁元素的顯示區域，而不是缺省的顯示全部。

CSS Code復制內容到剪貼板

.clip-me {
/* 已被標志為不推薦使用的寫法 */ position: absolute; /* 需要 absolute 和 fixed 定位 */
clip: rect(110px, 160px, 170px, 60px); /* 或 "auto" */ /* 值描述的是一個 top/left 點和一個 bottom/right 點 */
/* 最新規范寫法 (沒有定位要求)， */
clip-path: inset(10px 20px 30px 40px); /* or "none" */ /* 值指的是 top, right, bottom, left 四個點 */
}

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

需要注意的是，數值中間是用空格分割的，而老式的是用逗號。
2016628114452083.jpeg (680×300)

例子：
2016628114534010.png (349×327)

看這個效果，對這個DIV進行了裁剪。

代碼如下：

XML/HTML Code復制內容到剪貼板

<div class="haorooms-small" style="background-image: url('http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/idtga8h3.png');"> </div>

CSS Code復制內容到剪貼板

.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%);