成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

[譯] 學(xué)習(xí) CSS clip-path 屬性

yuanxin / 3160人閱讀

摘要：整體來說網(wǎng)頁(yè)主要是由矩形所構(gòu)成的，另一方面印刷品則具備相對(duì)多樣性。即便我們?cè)O(shè)定的元素不再是矩形，但周圍的元素排列方式仍然維持原本矩形的佈局。為了達(dá)成周圍的元素跟著裁切的形狀，我們可以使用屬性。周圍的元素仍需要靠來修正。

整體來說網(wǎng)頁(yè)主要是由矩形所構(gòu)成的，另一方面印刷品則具備相對(duì)多樣性。造成這樣差異的原因有很多，不過其中一個(gè)即是缺少合適的工具。

這篇文章主要會(huì)介紹 clip-path 這個(gè) css 的樣式規(guī)則可以讓我們遮掉元素的局部，就是不顯示出來。達(dá)成這項(xiàng)功能背後的原理就是我們可以透過它去定義可視區(qū)，類似於遮色片的概念。我們將從基礎(chǔ)開始然後涵蓋語(yǔ)法，進(jìn)一步理解進(jìn)階的概念。

基礎(chǔ)

clip 意思是剪裁，意味著修剪某物的外型。在網(wǎng)頁(yè)設(shè)計(jì)的情況下，是讓我們可以去決定某個(gè)元素完全隱藏或局部隱藏。而在這篇文章中另外兩個(gè)相關(guān)的概念是 clipping path 和 clipping region。

clipping path 剪裁路徑意思就是我們使用它去修剪一個(gè)元素，透過路徑組成 clipping region 剪裁範(fàn)圍。這個(gè)範(fàn)圍或稱區(qū)域可以是簡(jiǎn)單的形狀或複雜的多邊形。剪裁範(fàn)圍就是透過一個(gè)封閉的剪裁路徑所組成的，這與您使用 Illustrator 的鋼筆工具繪製形狀的概念是一樣的。

任何在形狀範(fàn)圍外的東西都會(huì)被瀏覽器裁掉。不只包含背景其他像是內(nèi)容，borders，text-shadow 效果都會(huì)被裁掉。此外瀏覽器甚至不會(huì)處理範(fàn)圍外的事件像是 hover, click 等。

即便我們?cè)O(shè)定的元素不再是矩形，但周圍的元素排列方式仍然維持原本矩形的佈局。為了達(dá)成周圍的元素跟著裁切的形狀，我們可以使用 shape-outside 屬性。

同時(shí)記住不要把舊的樣式 clip 和 clip-path 等搞混了。舊有的屬性只支援矩形的裁切。

使用

目前這個(gè)樣式規(guī)則的語(yǔ)法如下：

clip-path:  | [  ||  ] | none

上面語(yǔ)法表示的是：

clip-source 會(huì)是一個(gè) URL 參考到一個(gè) SVG 元素，這個(gè)元素可以是在檔案內(nèi)部的或外連的。

basic-shape 基本形狀的 function ，您可以在 CSS Shapes 規(guī)範(fàn) 中找到並使用。

geometry-box 可選的參數(shù)。搭配 basic-shape 函數(shù)，它的用途是設(shè)定整張畫布的基準(zhǔn)點(diǎn)，定義裁切從哪範(fàn)圍開始。如果我們自訂 geometry-box 那裁切路徑便會(huì)照著我們定義的形狀，包含任何圓角設(shè)定 border-radius 。這樣說有點(diǎn)模糊，稍後我們會(huì)詳細(xì)介紹。

現(xiàn)在，讓我們來思考下面這段 css 程式

img {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

這段設(shè)定將會(huì)裁切所有圖片為一個(gè)菱形。不過為什麼圖片會(huì)變成菱形呢？為什麼不是梯形或平行四邊形？您應(yīng)該猜到了，這是因?yàn)樾螤钊Q為我們定義的頂點(diǎn)。下面圖片說明了建立裁切形狀時(shí)使用的慣例

每個(gè)座標(biāo)的第一個(gè)參數(shù)指定了該座標(biāo)的 x 軸，第二個(gè)參數(shù)則是 y 軸。所有的點(diǎn)依照順時(shí)鐘的方向繪製。依照這個(gè)規(guī)則與上圖我想您應(yīng)該理解了。

如果您正在使用 CodePen 測(cè)試這些語(yǔ)法，請(qǐng)注意上面的程式範(fàn)例僅在 Chrome 並且需要使用 prefix 才能正常運(yùn)行，您可以打開 Auto Prefix 功能。

CodePen

使用 geometry-box 裁切元素

當(dāng)我們要裁切 HTML 元素時(shí)，geometry-box 可以是下列值 margin-box, border-box, padding-box, content-box

.el {
  clip-path: polygon(10% 20%, 20% 30%, 50% 80%) margin-box;
  margin: 15px;
}

上面的範(fàn)例，margin-box 會(huì)決定我們得座標(biāo)點(diǎn)從 margin 的範(fàn)圍開始，而 (10%, 10%) 就是我們實(shí)際內(nèi)容的左上角，因此 clip-path 也必須對(duì)應(yīng)計(jì)算。

SVG 元素的狀況下，參數(shù)可能是 fill-box, stroke-box, view-box 。其中 view-box 會(huì)最接近整個(gè) svg 的可視範(fàn)圍。

clip-path 的使用方式

關(guān)於這個(gè)屬性有很多有趣的使用方式。第一個(gè)就是它可以美化文字內(nèi)容。您可以觀察一下下圖，我們透過背景色與裁切所營(yíng)造出的感覺不再受限與單純的方形。

簡(jiǎn)單說您可以簡(jiǎn)單的使用背景色，漸層等等您已經(jīng)熟悉的屬性然後搭配 clip-path ，例如上面粉紅色背景類似泡泡對(duì)話框的效果，從前我們可以要透過 border 組成三角形在透過 transform 和調(diào)整位置等屬性去完成，現(xiàn)在換成 clip-path 只需要一行，我們可以輕鬆完成任何不規(guī)則的形狀。

.msg {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 85%, 75% 100%, 50% 80%, 0% 75%);
}

當(dāng)然您可以用來裁切圖片使其變成各種不同的形狀，您的相片圖庫(kù)的頁(yè)面不再只能用矩形呈現(xiàn)。下面是一個(gè)範(fàn)例建議您使用 Chrome 玩玩

CodePen

動(dòng)畫

這個(gè)屬性也能夠被用在動(dòng)畫上。唯一要注意的是初始時(shí)和最後結(jié)果的座標(biāo)數(shù)量要一致。

@keyframes polygons {
  25% {
    clip-path: polygon(20% 0%, 100% 38%, 70% 90%, 0% 100%);
  }
  50% {
    clip-path: polygon(0 46%, 100% 15%, 55% 74%, 0 100%);
  }
  70% {
    clip-path: polygon(100% 38%, 100% 38%, 66% 100%, 0 53%);
  }
}

為了維持動(dòng)畫的順暢，基本上座標(biāo)數(shù)量最好保持一致，至於形狀的變化您可以透過重疊座標(biāo)來實(shí)現(xiàn)。

奇技淫巧

另外我們還可以透過 clip-path 來隱藏元素，不過這個(gè)效果類似於 visibility 和 opacity 該位置空間仍會(huì)被佔(zhàn)據(jù)。

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}
關(guān)於瀏覽器支援度

這個(gè)屬性暫時(shí)在 IE, Edge 是不能使用的，F(xiàn)irefox 也還沒完全支援只支援部份語(yǔ)法，在 v47 還得要套過 layout.css.clip-path-shapes.enabled 來開啟。Chrome 的話要加上 -webkit- prefix。

總結(jié)

總結(jié)來說關(guān)於 clip-path 的重點(diǎn)大略為

設(shè)定的座標(biāo)點(diǎn)(clip-path)需要能夠封閉，圍成一個(gè)形狀(clip-range)，這個(gè)形狀就是顯示的區(qū)域。

周圍的元素仍需要靠 shape-outside 來修正。

geometry-box 用來設(shè)定座標(biāo)軸範(fàn)圍，用在 HTML 和 SVG 參數(shù)是不同的。

動(dòng)畫的部分座標(biāo)點(diǎn)數(shù)量需維持一致。

目前大多數(shù)的瀏覽器支援度還不夠。

clippy 和 座標(biāo)產(chǎn)生器可以協(xié)助我們?nèi)〉米鶚?biāo)。

原文參考

Introducing the CSS clip-path Property

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111363.html

相關(guān)文章

  • [譯] 透過重新實(shí)作來學(xué)習(xí)參透閉包

    摘要：不過到底是怎麼保留的另外為什麼一個(gè)閉包可以一直使用區(qū)域變數(shù)，即便這些變數(shù)在該內(nèi)已經(jīng)不存在了為了解開閉包的神秘面紗，我們將要假裝沒有閉包這東西而且也不能夠用嵌套來重新實(shí)作閉包。 原文出處: 連結(jié) 話說網(wǎng)路上有很多文章在探討閉包(Closures)時(shí)大多都是簡(jiǎn)單的帶過。大多的都將閉包的定義濃縮成一句簡(jiǎn)單的解釋，那就是一個(gè)閉包是一個(gè)函數(shù)能夠保留其建立時(shí)的執(zhí)行環(huán)境。不過到底是怎麼保留的？ 另外...

    CoXie 評(píng)論0 收藏0

  • 【譯】chrome-remote-interface

    摘要：該支持下列事件當(dāng)?shù)降倪B接已建立時(shí)觸發(fā)。取得該調(diào)試協(xié)議描述符。在關(guān)閉請(qǐng)求收到響應(yīng)后執(zhí)行，他將獲得下列參數(shù)一個(gè)對(duì)象，指明成功狀態(tài)當(dāng)缺省時(shí)，將返回一個(gè)對(duì)象。當(dāng)缺省時(shí)，將返回一個(gè)對(duì)象，並且狀態(tài)取決于屬性。 本文翻譯自：chrome-remote-interface原文更新時(shí)間：July 21,2017譯者：Pandorym Chrome 調(diào)試協(xié)議 的接口，他提供一個(gè)使用 JavaScript ...

    lentoo 評(píng)論0 收藏0

  • [譯 + 更新] 參透 Node 中 exports 的 7 種設(shè)計(jì)模式

    摘要：現(xiàn)在，我們可以開始探討介面的設(shè)計(jì)模式了。匯出命名空間一個(gè)簡(jiǎn)單且常用的設(shè)計(jì)模式就是匯出一個(gè)包含數(shù)個(gè)屬性的物件，這些屬性具體的內(nèi)容主要是函式，但並不限於函式。如此，我們就能夠透過匯入該模組來取得這個(gè)命名空間下一系列相關(guān)的功能。 前言 這篇文章試著要整理，翻譯Export This: Interface Design Patterns for Node.js Modules這篇非常值得一讀的...

    wmui 評(píng)論0 收藏0

  • [譯 + 補(bǔ)充]理解 DOM 座標(biāo)

    摘要：相對(duì)於座標(biāo)在可視區(qū)的最左上角?；笞鶚?biāo)通常透過事件取得。再次強(qiáng)調(diào)不幸的是沒有屬性可以直接取得元素對(duì)應(yīng)的座標(biāo)。觸發(fā)事件的元素相對(duì)於父容器定位元素的座標(biāo)，從開始計(jì)算。上個(gè)座標(biāo)與當(dāng)前的座標(biāo)移動(dòng)距離。 座標(biāo)系統(tǒng) 在瀏覽器中有兩種座標(biāo)系統(tǒng) & 滑鼠座標(biāo)： 1. 相對(duì)於 `document` - 座標(biāo) (0, 0) 在整個(gè)頁(yè)面的最左上角。 2. 相對(duì)於 `window` - 座標(biāo) (0, 0) 在...

    Lionad-Morotar 評(píng)論0 收藏0

  • [譯] Houdini: 你還沒聽說！這可能是 CSS 下一件最令人興奮的大事

    摘要：接下來我們將會(huì)更具體的說明是什麼東西和這傢伙會(huì)怎麼解決這些問題，並且列出目前開發(fā)中一些令人興奮的功能。這個(gè)功能甚至還沒有一個(gè)瀏覽器支援。完整的清單請(qǐng)查閱目前還未被寫入規(guī)範(fàn)，意思是這邊提到任何內(nèi)容極有可能會(huì)改變。 譯者：其實(shí)...我想說這可能是最令我感到興奮..但又害怕頭痛的功能... 附上原文連結(jié) 你曾經(jīng)想要使用某個(gè) CSS 的新功能，但是最後卻因?yàn)檫@個(gè)功能瀏覽器還未全面支援而放棄了嗎...

    bergwhite 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<