大廠技術(shù)??高級(jí)前端??Node進(jìn)階

點(diǎn)擊上方?程序員成長(zhǎng)指北，關(guān)注公眾號(hào)

回復(fù)1，加入高級(jí)Node交流群

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

效果

首先讓我們看看效果

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

代碼：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路徑、盒子模型、基本多邊形路徑等幾種不同的方式來(lái)裁切

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.盒子模型

顧名思義就是按照盒子模型來(lái)裁切

1. clip-path : margin-box: 按照 margin box 裁切
2. clip-path : border-box: 按照 border box 裁切
3. clip-path : padding-box: 按照 padding box 裁切
4. clip-path : content-box: 按照 content box 裁切
5. clip-path : fill-box: 按照對(duì)象邊界框（object bounding box）裁切
6. clip-path : stroke-box: 按照筆觸邊界框（stroke bounding box）裁切
7. clip-path : view-box: 按照SVG 視口裁切

3.幾何圖形

1. 多邊形polygon：

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

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

效果：

2. 圓形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軸長(zhǎng)度，at 后面的 50% 50% 代表圓心

效果：

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

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

效果：

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