之前的工作中有用到過(guò)clip這個(gè)屬性辜荠。最近工作又再次用到這個(gè)屬性時(shí)，發(fā)現(xiàn)自己忘了怎么設(shè)置這個(gè)屬性值的了政冻∶兜郑看來(lái)上次沒(méi)有真的弄懂這個(gè)屬性，又去查了查文檔學(xué)習(xí)了一下明场。這里簡(jiǎn)單分享汽摹，同時(shí)加深一下映像。
作用
w3school是這么說(shuō)的: clip 屬性剪裁絕對(duì)定位元素苦锨。 MDN是這么說(shuō)的: clip 屬性定義了元素的哪一部分是可見(jiàn)的逼泣。
可能值
| 值 | 描述 |
|---|---|
| shape | 設(shè)置元素的形狀。唯一合法的形狀值是：rect (top, right, bottom, left) |
| auto | 默認(rèn)值舟舒。不應(yīng)用任何剪裁拉庶。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 clip 屬性的值。 |
rect(<top> <right> <bottom> <left>)裁剪出一個(gè)"矩形"的可見(jiàn)區(qū)域秃励。
??<top>???指定矩形上邊框相對(duì)于盒子上邊框邊的偏移
??<bottom>? 指定矩形下邊框相對(duì)于盒子上邊框邊的偏移
??<left>???指定矩形左邊框相對(duì)于盒子左邊框邊界的偏移
??<right>?? 指定矩形右邊框相對(duì)于盒子左邊框邊界的偏移
實(shí)例
現(xiàn)在用clip屬性對(duì)下面這張圖片進(jìn)行一下裁剪
<html>
<head>
<style type="text/css">
img
{
position:absolute;
clip:rect(75px 60px 151px 0px);
}
</style>
</head>
<body>
<p>clip 屬性剪切了一幅圖像：</p>
<p></p>
</body>
</html>
clip:rect(75px 60px 151px 0px);指定矩形上邊框相對(duì)于盒子上邊框邊的偏移75個(gè)像素氏仗，矩形左邊框相對(duì)于盒子左邊框邊的偏移60個(gè)像素，矩形下邊框相對(duì)于盒子上邊框邊的偏移151個(gè)像素夺鲜，矩形右邊框相對(duì)于盒子左邊框邊的偏移0個(gè)像素皆尔。所以顯示的部分應(yīng)該就是左下角四分之一區(qū)域呐舔。如下圖：
以上效果可以在w3school 做做嘗試。我這里之前還使用clip實(shí)現(xiàn)過(guò)一個(gè)音頻播放圓環(huán)進(jìn)度條慷蠕。有興趣也可以看看珊拼。使用CSS clip 屬性實(shí)現(xiàn)音頻播放圓環(huán)進(jìn)度條
