點(diǎn)擊上方?前端Q，關(guān)注公眾號(hào)

回復(fù)加群，加入前端Q技術(shù)交流群

最近在嘗試一些風(fēng)格化的css，于是開始注意起了一些平常寫業(yè)務(wù)時(shí)不太關(guān)注的css屬性。今天給大家介紹一下clip-path這個(gè)屬性。以及能用它實(shí)現(xiàn)什么效果。

效果

首先讓我們看看效果

1. 賽博朋克風(fēng)邊框

image.png

代碼：codepen.io/1171326722/…^[1]

2.賽博朋克風(fēng)格按鈕

代碼：codepen.io/1171326722/…^[2]

3.旋轉(zhuǎn)邊框

代碼：codepen.io/1171326722/…^[3]

網(wǎng)址：bennettfeely.com/clippy/^[4]

用法：

clip-path的作用和名字一樣，按照路徑裁切。只要我們腦洞夠大，把元素裁切成相應(yīng)的形狀，就能做出許多意令人意想不到的奇妙效果。clip-path可以按照svg路徑、盒子模型、基本多邊形路徑等幾種不同的方式來裁切

1.svg

clip-path:?url();
復(fù)制代碼

先定義一個(gè)svg路徑,然后給元素加上clip-path: url(#id);屬性

//html
<svg?height="0"?width="0">?
????<defs>?
????????<clipPath?id="svgPath">
????????????<path?id="heart"?d="M10,30?A20,20,0,0,1,50,30?A20,20,0,0,1,90,30?Q90,60,50,90?Q10,60,10,30?Z"?/>
????????clipPath>?
????defs>?
svg>
<img?class?=?'clipImg'?src="https://w.wallhaven.cc/full/z8/wallhaven-z8dg9y.png"?/>
復(fù)制代碼

//css
.clipImg{
??clip-path:url(#svgPath)
}
復(fù)制代碼

效果如下

2.盒子模型

顧名思義就是按照盒子模型來裁切

clip-path : margin-box: 按照 margin box 裁切
clip-path : border-box: 按照 border box 裁切
clip-path : padding-box: 按照 padding box 裁切
clip-path : content-box: 按照 content box 裁切
clip-path : fill-box: 按照對象邊界框（object bounding box）裁切
clip-path : stroke-box: 按照筆觸邊界框（stroke bounding box）裁切
clip-path : view-box: 按照SVG 視口裁切

3.幾何圖形

多邊形polygon：

用法：clip-path:?polygon(`50% 0%`,?`0% 100%`,?`100% 100%`);

polygon參數(shù)代表著一個(gè)個(gè)點(diǎn)，clip-path通過這些點(diǎn)連成的路徑進(jìn)行裁切。

效果：

圓形circle：

用法: clip-path:?circle(`50%`?at?`50% 50%`);。

at 前的50%代表半徑為50% ，后面的 50% 50% 代表圓心的

效果：

3.橢圓ellipse 用法clip-path:?ellipse(`25%`?`40%`?at?`50% 50%`);

at 前的 25% 40% 代表橢圓的x軸y軸長度，at 后面的 50% 50% 代表圓心

效果：

4.inset：用法clip-path:?inset(`8%`?`11%`?`19%`?`34%`);

四個(gè)值分別為上右下左四條邊到元素邊界的距離

效果：

說到這里，推薦一個(gè)十分實(shí)用的網(wǎng)站。當(dāng)你不太熟悉用clip-path切圖的時(shí)候，可以上 bennettfeely.com/clippy/^[5] 這個(gè)網(wǎng)站，他可以快速切出一些基本的圖形，并附上代碼。我寫的的案例就是用這個(gè)網(wǎng)站實(shí)現(xiàn)的。

關(guān)于本文