資訊專欄INFORMATION COLUMN
摘要：裁剪路徑可以將如或自由變化的應(yīng)用于任何元素。元素中不在形狀邊界內(nèi)的任何內(nèi)容都將被裁剪刪除掉。例如，我們可以從內(nèi)容隱藏完全裁剪開始，并增大裁剪路徑以顯示其中的內(nèi)容。
隨著瀏覽器對shape-outside和clip-path等屬性的支持增加，CSS Shapes越來越受到關(guān)注。有幾種方法可以使用CSS Shapes，特別是clip-path屬性，乍一看我們并不知道這個屬性如何使用，下面就來詳細(xì)的介紹它。
裁剪路徑clip path的基礎(chǔ)知識在深入研究之前，我們應(yīng)該先看看基本的形狀和clip-path。裁剪路徑可以將CSS Shapes如circle()、ellipse(), inset()或自由變化的polygon()應(yīng)用于任何元素。元素中不在形狀邊界內(nèi)的任何內(nèi)容都將被裁剪刪除掉。
使用多邊形函數(shù)，我們可以創(chuàng)建三角形、星形或其他形狀，雖然在可以使用px等固定單位，但百分比將提供更大的靈活性并自適應(yīng)于元素的尺寸。
所以對于一個八邊形，我們可以設(shè)置八組x，y點坐標(biāo)來定義。在這種情況下，對于第一個x，我們從盒子寬度的30%開始，對于y，我們從盒子的頂部開始，然后順時針設(shè)置各個點。可見區(qū)域就是通過將這些點用直線連接而形成的形狀。
clip-path: polygon( 30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30% );看不見的頂點
上面實現(xiàn)一個八邊形，我們設(shè)置了八個點的坐標(biāo)。但是，我們可以跳出元素框的限制去思考，也就是說要跳出0% - 100%的這個范圍。
元素的盒邊框是裁剪后內(nèi)容的顯示邊界，但我們?nèi)匀豢梢詾樵囟x超出盒邊框的點。
通過定義超過0%-100%范圍的點，我們可以把一個有三個點的多邊形變成四邊形、五邊形或六邊形。在這個例子中，都是定義clip-path: polygon()函數(shù)的三個點，但是由于超出了元素框的邊界，我們可以看到一個三角形和兩個五邊形。
于是，上面的八邊形只用四個點就可以實現(xiàn)。
一條裁剪路徑，多個形狀我們可以利用超出元素邊界的這種能力用一個polygon()創(chuàng)建多個裁剪形狀。
CSS源碼
根據(jù)元素的位置，我們可以直接制作出每個形狀，但是因為我們知道裁剪坐標(biāo)點可以在元素框之外的空間中移動，所以可以繪制額外的線來幫助我們找到下一個點的位置。
它還可以幫助我們分割元素。結(jié)合CSS自定義屬性，我們可以處理重疊的元素，并將每個元素裁剪成交替的條帶。下面的例子是兩個重疊的圓角矩形，每個被分成不規(guī)則的矩形動畫。
CSS源碼
polygon()函數(shù)不僅僅是一組坐標(biāo)點的集合，它還有另外的一個參數(shù) — 填充規(guī)則 ，我們一直使用的默認(rèn)值是nonzero，它還有另外一個值是evenodd，這兩個值它們確定形狀的內(nèi)部和外部的規(guī)則是不同的。
CSS源碼
當(dāng)使用evenodd規(guī)則時，我們可以通過從任意的點繪制光線來確定點是在邊界內(nèi)還是在邊界外。如果光線穿過裁剪路徑線的和為偶數(shù)，則該點被視為外部，如果光線穿過裁剪路徑線的和為奇數(shù)，則該點位于內(nèi)部。
順序要注意的是，有許多CSS屬性例如CSS Filters, Blend Modes等都會影響元素的外觀。而這些效果會按下面的順序應(yīng)用到元素上：
CSS Filters (例如 filter: blur(2px))
Clipping (本文所講的)
Masking (類似與裁剪)
Blend Modes (例如 mix-blend-mode: multiply)
Opacity
如果我們需要一個模糊的星星形狀，模糊效果會發(fā)生在裁剪之前。由于模糊效果會參照元素的邊框，但是我們將元素邊框裁剪掉了，于是前一個星星的模糊效果會丟失。
CSS源碼
如果我們想模糊星星，可以選擇將剪裁后的元素包裹在模糊的父元素中。內(nèi)部元素將首先呈現(xiàn)其星星的形狀，然后父元素將正常模糊其內(nèi)容。
通過動畫來顯示內(nèi)容CSS Shapes是可以添加動畫效果的，它允許我們在不影響元素內(nèi)容的情況下改變元素的可視區(qū)域。例如，我們可以從內(nèi)容隱藏（完全裁剪）開始，并增大裁剪路徑以顯示其中的內(nèi)容。要注意的是，clip-path: polygon()動畫形的一個重要條件是每個關(guān)鍵幀的坐標(biāo)點數(shù)以及填充規(guī)則都必須相同。否則，瀏覽器將沒有足夠的信息來插入中間值。
CSS源碼
Clip paths給我們提供了一些新的有趣的可能，同時clip-path屬性并不會改變元素本身的尺寸和布局，這也是它強大的地方，我們可以大量的使用這個屬性來改變元素的外觀。
獲取以上效果的全部源碼可以：
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/114823.html
摘要：裁剪路徑可以將如或自由變化的應(yīng)用于任何元素。元素中不在形狀邊界內(nèi)的任何內(nèi)容都將被裁剪刪除掉。例如，我們可以從內(nèi)容隱藏完全裁剪開始，并增大裁剪路徑以顯示其中的內(nèi)容。 隨著瀏覽器對shape-outside和clip-path等屬性的支持增加，CSS Shapes越來越受到關(guān)注。有幾種方法可以使用CSS Shapes，特別是clip-path屬性，乍一看我們并不知道這個屬性如何使用，下面就...
摘要：裁剪路徑可以將如或自由變化的應(yīng)用于任何元素。元素中不在形狀邊界內(nèi)的任何內(nèi)容都將被裁剪刪除掉。例如，我們可以從內(nèi)容隱藏完全裁剪開始，并增大裁剪路徑以顯示其中的內(nèi)容。 隨著瀏覽器對shape-outside和clip-path等屬性的支持增加，CSS Shapes越來越受到關(guān)注。有幾種方法可以使用CSS Shapes，特別是clip-path屬性，乍一看我們并不知道這個屬性如何使用，下面就...
摘要：一般地，一個塊盒的內(nèi)容都被限制在該盒的邊內(nèi)。這種盒并不一定會根據(jù)其祖先的屬性裁剪。默認(rèn)情況下，元素不會被裁剪。在閉合路徑內(nèi)的內(nèi)容會顯示，而路徑外邊的都會被剪掉著作權(quán)歸作者所有。 Overflow and clipping 一般地，一個塊盒的內(nèi)容都被限制在該盒的content邊內(nèi)。某些情況下，一個盒可能會溢出，意味著它的部分內(nèi)容或者全部內(nèi)容位于該盒外部，例如： 一行無法拆分，導(dǎo)致行盒比...
摘要：之前的工作中有用到過這個屬性。作用是這么說的屬性剪裁絕對定位元素。唯一合法的形狀值是默認(rèn)值。規(guī)定應(yīng)該從父元素繼承屬性的值。所以顯示的部分應(yīng)該就是左下角四分之一區(qū)域。使用屬性實現(xiàn)音頻播放圓環(huán)進度條 ??之前的工作中有用到過clip這個屬性。最近工作又再次用到這個屬性時，發(fā)現(xiàn)自己忘了怎么設(shè)置這個屬性值的了?？磥砩洗螞]有真的弄懂這個屬性，又去查了查文檔學(xué)習(xí)了一下。這里簡單分享，同時加深一下映...
摘要：之前筆試題有一道選擇題是關(guān)于屬性的，后來查閱資料才發(fā)現(xiàn)有各種子屬性，特寫此文章整理一下。新增指定背景的顯示區(qū)域。默認(rèn)情況下，總是以元素左上角為坐標(biāo)原點進行背景圖像定位。此關(guān)鍵字表示背景相對于元素的內(nèi)容固定。 之前筆試題有一道選擇題是關(guān)于background屬性的，后來查閱資料才發(fā)現(xiàn)background有各種子屬性，特寫此文章整理一下。 瀏覽器兼容性支持 PC端：showImg(http...
閱讀 1602·2023-04-26 00:20
閱讀 1213·2023-04-25 21:49
閱讀 870·2021-09-22 15:52
閱讀 647·2021-09-07 10:16
閱讀 1029·2021-08-18 10:22
閱讀 2723·2019-08-30 14:07
閱讀 2294·2019-08-30 14:00
閱讀 2723·2019-08-30 13:00
