clip

語法:

clipauto | <shape>

<shape>:rect(<number>|auto <number>|auto <number>|auto <number>|auto)

預設值auto

適用於:絕對定位元素

繼承性:無

動畫性:當值為<shape>

計算值:指定的值

媒 體:視覺

取值:

auto:
物件無剪切
rect(<number>|auto <number>|auto <number>|auto <number>|auto):
依據上-右-下-左的順序提供自物件左上角為(0,0)坐標計算的四個偏移數值,其中任一數值都可用auto替換,即此邊不剪切。
上-左 方位的裁剪:從0開始剪裁直到設定值,即 上-左 方位的auto值等同於0;
右-下 方位的裁剪:從設定值開始剪裁直到最右邊和最下邊,即 右-下 方位的auto值為盒子的實際寬度和高度;

示例:clip: rect(auto 50px 20px auto)

說明:上邊不剪切,右邊從左起第50個像素開始剪切直至最右邊,下邊從上起第20個像素開始剪切直至最底部,左邊不剪切

說明:

定義了元素的哪一部分是可見的。區域外的部分是透明的
  • 這個屬性將被廢棄,推薦使用 clip-path 代替,在轉場階段,仍然會存在一段時間。
  • 必須將position的值設為absolute或者fixed,此屬性方可使用。
  • 對應的腳本特性為clip

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support #1 8.0+ 40.0+ 40.0+ 8.0+ 40.0+ 8.0+ 4.4+ 28.0+
rect(逗號分隔)
  1. Basic Support包含值:auto | rect(空格分隔)

示例: