資訊專欄INFORMATION COLUMN
摘要：之前的工作中有用到過這個屬性。作用是這么說的屬性剪裁絕對定位元素。唯一合法的形狀值是默認值。規(guī)定應該從父元素繼承屬性的值。所以顯示的部分應該就是左下角四分之一區(qū)域。使用屬性實現(xiàn)音頻播放圓環(huán)進度條
??之前的工作中有用到過clip這個屬性。最近工作又再次用到這個屬性時，發(fā)現(xiàn)自己忘了怎么設(shè)置這個屬性值的了?？磥砩洗螞]有真的弄懂這個屬性，又去查了查文檔學習了一下。這里簡單分享，同時加深一下映像。
作用??w3school是這么說的: clip 屬性剪裁絕對定位元素。 MDN是這么說的: clip 屬性定義了元素的哪一部分是可見的。
可能值| 值 | 描述 |
|---|---|
| shape | 設(shè)置元素的形狀。唯一合法的形狀值是：rect (top, right, bottom, left) |
| auto | 默認值。不應用任何剪裁。 |
| inherit | 規(guī)定應該從父元素繼承 clip 屬性的值。 |
??rect(
??
??
??
??
??現(xiàn)在用clip屬性對下面這張圖片進行一下裁剪
clip 屬性剪切了一幅圖像：
??clip:rect(75px 60px 151px 0px);指定矩形上邊框相對于盒子上邊框邊的偏移75個像素，矩形左邊框相對于盒子左邊框邊的偏移60個像素，矩形下邊框相對于盒子上邊框邊的偏移151個像素，矩形右邊框相對于盒子左邊框邊的偏移0個像素。所以顯示的部分應該就是左下角四分之一區(qū)域。如下圖：
??以上效果可以在w3school 做做嘗試。我這里之前還使用clip實現(xiàn)過一個音頻播放圓環(huán)進度條。有興趣也可以看看。使用CSS clip 屬性實現(xiàn)音頻播放圓環(huán)進度條
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115568.html
摘要：一個用來生成各種形狀包括隨意拖拉自定義并且可以直接生成代碼的網(wǎng)站。兼容性目前兼容性較差，和直接不支持，考慮兼容性的同學可以暫時等等。透明區(qū)域表示被裁剪的區(qū)域基本圖形定義一個矩形。語法說明可選，表示填充規(guī)則用來確定該多邊形的內(nèi)部。 本文首發(fā)于 我的博客 曾經(jīng)和某位朋友在聊天中討論過這樣一個話題：綜合90%的網(wǎng)站的布局以及頁面中的元素不是方的，就是圓的。就像所有的顏色都是由三原色（RGB）...
摘要：裁剪路徑可以將如或自由變化的應用于任何元素。元素中不在形狀邊界內(nèi)的任何內(nèi)容都將被裁剪刪除掉。例如，我們可以從內(nèi)容隱藏完全裁剪開始，并增大裁剪路徑以顯示其中的內(nèi)容。 隨著瀏覽器對shape-outside和clip-path等屬性的支持增加，CSS Shapes越來越受到關(guān)注。有幾種方法可以使用CSS Shapes，特別是clip-path屬性，乍一看我們并不知道這個屬性如何使用，下面就...
摘要：裁剪路徑可以將如或自由變化的應用于任何元素。元素中不在形狀邊界內(nèi)的任何內(nèi)容都將被裁剪刪除掉。例如，我們可以從內(nèi)容隱藏完全裁剪開始，并增大裁剪路徑以顯示其中的內(nèi)容。 隨著瀏覽器對shape-outside和clip-path等屬性的支持增加，CSS Shapes越來越受到關(guān)注。有幾種方法可以使用CSS Shapes，特別是clip-path屬性，乍一看我們并不知道這個屬性如何使用，下面就...
摘要：裁剪路徑可以將如或自由變化的應用于任何元素。元素中不在形狀邊界內(nèi)的任何內(nèi)容都將被裁剪刪除掉。例如，我們可以從內(nèi)容隱藏完全裁剪開始，并增大裁剪路徑以顯示其中的內(nèi)容。 隨著瀏覽器對shape-outside和clip-path等屬性的支持增加，CSS Shapes越來越受到關(guān)注。有幾種方法可以使用CSS Shapes，特別是clip-path屬性，乍一看我們并不知道這個屬性如何使用，下面就...
摘要：這兩個屬性正是今天的重頭戲，博主曾在從隱藏元素談起提起過，但并沒做深入解釋。另外，四個值分別是相對于圖片左上角為原點的坐標值?；舅械臑g覽器都支持，可以放心使用。 前言 圖片是一個網(wǎng)站必不可少的元素，而呈現(xiàn)出絢麗多彩的圖片效果在很多情況下不僅僅是設(shè)計師的工作，通過代碼來修飾圖片也是一個前端工程師必備的技能。因為兼容性的問題，實際項目中可能用的比較少，包括博主自己也只是用過幾次剪切，很...
閱讀 1421·2021-10-11 11:12
閱讀 3256·2021-09-30 09:46
閱讀 1639·2021-07-28 00:14
閱讀 3142·2019-08-30 13:49
閱讀 2590·2019-08-29 11:27
閱讀 3242·2019-08-26 11:52
閱讀 607·2019-08-23 18:14
閱讀 3442·2019-08-23 16:27
