[zh-TW]: update the translation of CSS clip property (#25116)

Co-authored-by: A1lo <[email protected]>

files/zh-tw/web/css/clip/index.md

@@ -1,64 +1,66 @@
 ---
 title: clip
 slug: Web/CSS/clip
+l10n:
+  sourceCommit: 4e508e2f543c0d77c9c04f406ebc8e9db7e965be
 ---
 
-{{CSSRef}}{{deprecated_header}}
-
-## 總結
-
-**`這個 clip`** [CSS](/zh-TW/docs/Web/CSS) 屬性用來定義元素的哪一個部分是可見的. `clip` 屬性只能被賦予在絕對位置的元素(element)上, 像是帶有這些的 CSS 屬性的元素 {{cssxref("position","position:absolute")}} or {{cssxref("position","position:fixed")}}.
+{{CSSRef}}{{Deprecated_Header}}
 
 > [!WARNING]
-> 這個屬性被遺棄了. 請改用 {{cssxref("clip-path")}} .
+> 若有可能，建議作者使用較新的 {{cssxref("clip-path")}} 屬性來取代。
 
-{{cssinfo}}
+**`clip`** [CSS](/zh-TW/docs/Web/CSS) 屬性定義了元素的可見部分。`clip` 屬性僅適用於絕對定位的元素，即具有 {{cssxref("position","position:absolute")}} 或 {{cssxref("position","position:fixed")}} 的元素。
 
-## Syntax
+## 語法
 
 ```css
-/* Keyword value */
+/* 關鍵字值 */
 clip: auto;
 
-/* <shape> values */
-clip: rect(1px 10em 3rem 2ch);
+/* <shape> 值 */
 clip: rect(1px, 10em, 3rem, 2ch);
 
-/* Global values */
+/* 全域值 */
 clip: inherit;
 clip: initial;
+clip: revert;
+clip: revert-layer;
 clip: unset;
 ```
 
-### Values
+### 值
+
+- {{cssxref("shape")}}
+
+  - : 一個矩形 {{cssxref("shape")}}，格式為 `rect(<top>, <right>, <bottom>, <left>)`。`<top>` 和 `<bottom>` 值是從盒子*內部上邊框邊緣*的偏移，而 `<right>` 和 `<left>` 是從*內部左邊框邊緣*的偏移，即填充區域的範圍。
+
+    `<top>`、`<right>`、`<bottom>` 和 `<left>` 的值可以是 {{cssxref("&lt;length&gt;")}} 或 `auto`。若任何邊的值為 `auto`，元素將會被裁切至該邊的*內部邊框邊緣*。
 
-- `<shape>`
-  - : A rectangular {{cssxref("&lt;shape&gt;")}} of the form `rect(<top>, <right>, <bottom>, <left>)` or of the form `rect(<top> <right> <bottom> <left>)` (which is a more backwards compatible syntax) `<top>` and `<bottom>` specify offsets from the _inside top border edge_ of the box, and `<right>`, and `<left>` specify offsets from the _inside left border edge_ of the box — that is, the extent of the padding box.`<top>`, `<right>`, `<bottom>`, and `<left>` may either have a {{cssxref("&lt;length&gt;")}} value or `auto`. If any side's value is `auto`, the element is clipped to that side's _inside border edge_.
 - `auto`
-  - : The element does not clip (default value). Note that this is distinct from `rect(auto, auto, auto, auto)`, which does clip to the inside border edges of the element.
+  - : 元素不裁切（預設值）。這不同於 `rect(auto, auto, auto, auto)`，後者裁切至元素的內部邊框邊緣。
 
-### Formal syntax
+## 形式定義
+
+{{cssinfo}}
+
+## 形式語法
 
 {{csssyntax}}
 
-## Examples
+## 範例
 
-### HTML
+### 裁切圖像
 
 ```html
 <p class="dotted-border">
-  <img src="macarons.png" title="Original graphic" />
-  <img id="top-left" src="macarons.png" title="Graphic clipped to upper left" />
-  <img id="middle" src="macarons.png" title="Graphic clipped towards middle" />
-  <img
-    id="bottom-right"
-    src="macarons.png"
-    title="Graphic clipped to bottom right" />
+  <img src="macarons.png" alt="原圖" />
+  <img id="top-left" src="macarons.png" alt="圖像被剪裁到左上角" />
+  <img id="middle" src="macarons.png" alt="圖像被剪裁到中間" />
+  <img id="bottom-right" src="macarons.png" alt="圖像被剪裁到右下角" />
 </p>
 ```
 
-### CSS
-
 ```css
 .dotted-border {
   border: dotted;
@@ -90,18 +92,24 @@ clip: unset;
 }
 ```
 
-### 結果
-
-{{EmbedLiveSample('Examples', '689px', '410px')}}
+{{EmbedLiveSample('裁切圖像', '', '450px')}}
 
-## Specifications
+## 規範
 
 {{Specifications}}
 
-## Browser compatibility
+## 瀏覽器相容性
 
 {{Compat}}
 
-## See also
-
-- Related CSS properties: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("overflow")}}, {{Cssxref("display")}}, {{Cssxref("position")}}
+## 參見
+
+- 此屬性已被棄用，請改用 {{cssxref("clip-path")}}。
+- 相關的 CSS 屬性：
+  - {{cssxref("text-overflow")}}
+  - {{cssxref("white-space")}}
+  - {{cssxref("overflow-x")}}
+  - {{cssxref("overflow-y")}}
+  - {{cssxref("overflow")}}
+  - {{cssxref("display")}}
+  - {{cssxref("position")}}