diff --git a/files/zh-tw/web/css/clip/index.md b/files/zh-tw/web/css/clip/index.md index 07dc95f4eacd25..45cd1405c39e78 100644 --- a/files/zh-tw/web/css/clip/index.md +++ b/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; -/* 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

- - - - + 原圖 + 圖像被剪裁到左上角 + 圖像被剪裁到中間 + 圖像被剪裁到右下角

``` -### 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")}}