CSS clip 的個人理解

2021-08-20 10:23:55 字數 622 閱讀 3414

網上查到的clip的介紹雖然有很多,但我覺得都沒有講到點子上,讓人有些摸不著頭腦。

如果像我一樣看的參考資料是w3school關於clip的示例 這個示例的話,相信很多人一開始都會不理解中間的兩個值是什麼,為什麼要這麼寫?

其實它倆就是的寬高,我也不知道他為什麼要寫的和的寬高不一樣,害我想了好久…

搞懂了這個之後,剩下的就好理解了

rect的四個屬性值是按照top-right-bottom-left(也就是順時針的順序)排序的,四個值都不能省略,每個值就代表剪裁掉的尺寸

clip屬性的使用:

img 

border="0"

src="p1.gif"

width="120"

height="151">

p>

以上面的示例為例,假如是clip:rect(10px 100px 121px 50px)

意思就是頂部剪裁10px,在原始的尺寸裡,右邊剪裁20px,底部剪裁30px,左邊剪裁50px。

我還找到了乙個演示的頁面css clip:rect幾個值含義示意例項頁面 還不懂的同學可以去除錯一下各項引數,更助於理解。

參考文章

CSS clip屬性理解

clip rect top,right,bottom,left clip 屬性剪裁絕對定位元素,用於定於乙個剪裁矩形。對於乙個絕對定義元素,在這個矩 形內的內容才可見。出了這個剪裁區域的內容會根據 overflow 值來處理。剪裁區域可能 比元素的內容區大,也可能比內容區小。注意 1.如果先有 ov...

DB LINK的個人理解

db link就是從乙個 oracle 資料庫服務連線到另乙個 oracle 資料庫服務的單方向的指標。db link連線是在 a資料庫上的使用者能使用儲存在a上的 link 來呼叫b 資料庫上的資訊。db link分為private和 public 兩種 private 只有建立該 db link...

Kalman filter的個人理解

最近在做目標跟蹤相關的工作,看了很多資料,零零總總的,過段時間自己都有些小混亂了 不知道是不是自己應該吃點核桃補腦了呢 在這裡mark些資料,當腦容量不足時候,就暫且卸掉一些,擴充容量後,再繼續裝載 kalman filter,wiki上對它的介紹很詳細,對應中文的介紹 對每一步k,定義矩陣a,h,...