From 497f93a807e2c249fd9e0f4929c722cd4642795a Mon Sep 17 00:00:00 2001 From: "Dr.XYZ" <121708493+Dr-XYZ@users.noreply.github.com> Date: Tue, 17 Dec 2024 03:09:01 +0000 Subject: [PATCH 1/3] update --- files/zh-tw/web/css/clip/index.md | 77 ++++++++++++++++++------------- 1 file changed, 44 insertions(+), 33 deletions(-) diff --git a/files/zh-tw/web/css/clip/index.md b/files/zh-tw/web/css/clip/index.md index 07dc95f4eacd25..c0b98b04154369 100644 --- a/files/zh-tw/web/css/clip/index.md +++ b/files/zh-tw/web/css/clip/index.md @@ -1,64 +1,69 @@ --- 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; -/* values */ -clip: rect(1px 10em 3rem 2ch); +/* 值 */ 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(, , , )`。`` 和 `` 值是從盒子*內部上邊框邊緣*的偏移,而 `` 和 `` 是從*內部左邊框邊緣*的偏移,即填充區域的範圍。 + + ``、``、`` 和 `` 的值可以是 {{cssxref("<length>")}} 或 `auto`。若任何邊的值為 `auto`,元素將會被裁切至該邊的*內部邊框邊緣*。 -- `` - - : A rectangular {{cssxref("<shape>")}} of the form `rect(, , , )` or of the form `rect( )` (which is a more backwards compatible syntax) `` and `` specify offsets from the _inside top border edge_ of the box, and ``, and `` specify offsets from the _inside left border edge_ of the box — that is, the extent of the padding box.``, ``, ``, and `` may either have a {{cssxref("<length>")}} 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

- - - + Original graphic + Graphic clipped to upper left + Graphic clipped towards middle + alt="Graphic clipped to bottom right" />

``` -### CSS - ```css .dotted-border { border: dotted; @@ -90,18 +95,24 @@ clip: unset; } ``` -### 結果 - -{{EmbedLiveSample('Examples', '689px', '410px')}} +{{EmbedLiveSample('clipping_an_image', "裁切圖像", '', '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")}} From 2561acb5911f98c530709216b7b7480f7f32608f Mon Sep 17 00:00:00 2001 From: "Dr.XYZ" <121708493+Dr-XYZ@users.noreply.github.com> Date: Thu, 19 Dec 2024 21:22:55 +0800 Subject: [PATCH 2/3] Apply suggestions from code review Co-authored-by: A1lo --- files/zh-tw/web/css/clip/index.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/files/zh-tw/web/css/clip/index.md b/files/zh-tw/web/css/clip/index.md index c0b98b04154369..4fb791d4e6f2c9 100644 --- a/files/zh-tw/web/css/clip/index.md +++ b/files/zh-tw/web/css/clip/index.md @@ -54,13 +54,13 @@ clip: unset; ```html

- Original graphic - Graphic clipped to upper left - Graphic clipped towards middle + 原圖 + 圖像被剪裁到左上角 + 圖像被剪裁到中間 Graphic clipped to bottom right + alt="圖像被剪裁到右下角" />

``` @@ -95,7 +95,7 @@ clip: unset; } ``` -{{EmbedLiveSample('clipping_an_image', "裁切圖像", '', '450px')}} +{{EmbedLiveSample('裁切圖像', '', '450px')}} ## 規範 From 46fff0b4571c96b3e9b8b3b789878fcc2477dc75 Mon Sep 17 00:00:00 2001 From: an-777 <121708493+Dr-XYZ@users.noreply.github.com> Date: Thu, 19 Dec 2024 21:36:11 +0800 Subject: [PATCH 3/3] fix --- files/zh-tw/web/css/clip/index.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/files/zh-tw/web/css/clip/index.md b/files/zh-tw/web/css/clip/index.md index 4fb791d4e6f2c9..45cd1405c39e78 100644 --- a/files/zh-tw/web/css/clip/index.md +++ b/files/zh-tw/web/css/clip/index.md @@ -57,10 +57,7 @@ clip: unset; 原圖 圖像被剪裁到左上角 圖像被剪裁到中間 - 圖像被剪裁到右下角 + 圖像被剪裁到右下角

```