CSS clip 屬性深刻

時間 2019-12-10

標籤 css clip 屬性深刻欄目 CSS 简体版

原文原文鏈接

以前的工做中有用到過clip這個屬性。最近工做又再次用到這個屬性時，發現本身忘了怎麼設置這個屬性值的了。看來上次沒有真的弄懂這個屬性，又去查了查文檔學習了一下。這裏簡單分享，同時加深一下映像。css

做用

w3school是這麼說的: clip 屬性剪裁絕對定位元素。 MDN是這麼說的: clip 屬性定義了元素的哪一部分是可見的。html

可能值

值	描述
shape	設置元素的形狀。惟一合法的形狀值是：rect (top, right, bottom, left)
auto	默認值。不該用任何剪裁。
inherit	規定應該從父元素繼承 clip 屬性的值。

rect(<top> <right> <bottom> <left>)裁剪出一個"矩形"的可見區域。
<top> 指定矩形上邊框相對於盒子上邊框邊的偏移
<bottom> 指定矩形下邊框相對於盒子上邊框邊的偏移
<left> 指定矩形左邊框相對於盒子左邊框邊界的偏移
<right> 指定矩形右邊框相對於盒子左邊框邊界的偏移學習

實例

如今用clip屬性對下面這張圖片進行一下裁剪
spa

<html>
<head>
<style type="text/css">
img 
{
position:absolute;
clip:rect(75px 60px 151px 0px);
}
</style>
</head>

<body>
<p>clip 屬性剪切了一幅圖像：</p>
<p><img border="0" src="http://www.w3school.com.cn/i/eg_bookasp.gif" width="120" height="151"></p>
</body>

</html>

clip:rect(75px 60px 151px 0px);指定矩形上邊框相對於盒子上邊框邊的偏移75個像素，矩形左邊框相對於盒子左邊框邊的偏移60個像素，矩形下邊框相對於盒子上邊框邊的偏移151個像素，矩形右邊框相對於盒子左邊框邊的偏移0個像素。因此顯示的部分應該就是左下角四分之一區域。以下圖：
ssr

以上效果能夠在w3school 作作嘗試。我這裏以前還使用clip實現過一個音頻播放圓環進度條。有興趣也能夠看看。使用CSS clip 屬性實現音頻播放圓環進度條code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。