clip 屬性剪裁絕對定位元素。 也就是說，只有 position:absolute 的時候才是生效的。
左右寬度相減的值是寬度，上下相減的值是高度。
top right bottom left分別指最終剪裁可見區域的上邊，右邊，下邊與左邊。而所有的數值都表示位置，且是相對於原始元素的左上角而言的。於是
rect(30px 200px 200px 20px) 表示的含義就是：最終剪裁的矩形的上邊距離原始元素的上邊緣30畫素；剪裁矩形的右邊緣距離原元素左邊緣的距離是200畫素；剪裁矩形的下邊緣距離原元素頂部的距離為200畫素；剪裁矩形的左邊緣距離原元素左邊緣的距離時20畫素。
img
這個圖的作用是，說明這4個值到底指的是那個距離。
a：剪裁矩形距離父元素頂部的長度。
b：剪裁矩形距離父元素左邊的長度 + 矩形寬度。
c：剪裁矩形距離父元素頂部的長度 + 矩形高度。
d：剪裁矩形距離父元素左邊的長度。
是不是有點繞？
舉個例子。
比如w3school 的例子 object.style.clip="rect(0px,50px,50px,0px)"
實際上，這擷取的就是左上角的一塊。
那麼，如果不小心輸錯了，4個值不能圍成乙個矩形怎麼辦？
那當然就什麼都看不見了。
參考：
矩形的知識
矩形已知三點求另外一點 void getrce int x1,int y1,int x2,int y2,int x3,int y3,int w 矩形已知對角兩點求另外兩點 假設乙個點為 a,b 另乙個為 c,d 就能得出乙個點為 c,b 另乙個為 a,d 已知矩形對角兩點判斷點是否在矩形內 doub...
純CSS圓角矩形
這樣形成的圓角，是具備多種優勢的 1.無論是在橫向還是縱向上都保持著無限的擴充套件性。試著修改box的width content的height。2.沒有hack，且不易出現瀏覽器相容性問題。3.圓角顏色易自定義。4.圓角大小可自定義。試著將class box 的修改為class box2 5.圓角模...
純css圓角矩形
html 這樣形成的圓角，是具備多種優勢的 1.無論是在橫向還是縱向上都保持著無限的擴充套件性。試著修改box的width content的height。2.沒有hack，且不易出現瀏覽器相容性問題。3.圓角顏色易自定義。4.圓角大小可自定義。試著將class box 的修改為class box2 ...