/
index.md
106 lines (76 loc) · 2.62 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
---
title: clip
slug: Web/CSS/clip
---
{{CSSRef}}{{deprecated_header}}
## 總結
**`這個 clip`** [CSS](/zh-TW/docs/Web/CSS) 屬性用來定義元素的哪一個部分是可見的. `clip` 屬性只能被賦予在絕對位置的元素(element)上, 像是帶有這些的 CSS 屬性的元素 {{cssxref("position","position:absolute")}} or {{cssxref("position","position:fixed")}}.
> **警告:** 這個屬性被遺棄了. 請改用 {{cssxref("clip-path")}} .
{{cssinfo}}
## Syntax
```css
/* Keyword value */
clip: auto;
/* <shape> values */
clip: rect(1px 10em 3rem 2ch);
clip: rect(1px, 10em, 3rem, 2ch);
/* Global values */
clip: inherit;
clip: initial;
clip: unset;
```
### Values
- `<shape>`
- : A rectangular {{cssxref("<shape>")}} 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("<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.
### Formal syntax
{{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" />
</p>
```
### CSS
```css
.dotted-border {
border: dotted;
position: relative;
width: 390px;
height: 400px;
}
#top-left,
#middle,
#bottom-right {
position: absolute;
top: 0;
}
#top-left {
left: 400px;
clip: rect(0, 130px, 90px, 0);
}
#middle {
left: 270px;
clip: rect(100px, 260px, 190px, 130px);
}
#bottom-right {
left: 140px;
clip: rect(200px, 390px, 290px, 260px);
}
```
### 結果
{{EmbedLiveSample('Examples', '689px', '410px')}}
## 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")}}