diff options
Diffstat (limited to 'files/zh-tw/web/css/clip/index.html')
| -rw-r--r-- | files/zh-tw/web/css/clip/index.html | 174 |
1 files changed, 174 insertions, 0 deletions
diff --git a/files/zh-tw/web/css/clip/index.html b/files/zh-tw/web/css/clip/index.html new file mode 100644 index 0000000000..900be65c41 --- /dev/null +++ b/files/zh-tw/web/css/clip/index.html @@ -0,0 +1,174 @@ +--- +title: clip +slug: Web/CSS/clip +translation_of: Web/CSS/clip +--- +<div>{{CSSRef}}{{deprecated_header}}</div> + +<h2 id="總結">總結</h2> + +<p><strong><code>這個 clip</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> 屬性用來定義元素的哪一個部分是可見的. <code>clip</code> 屬性只能被賦予在絕對位置的元素(element)上, 像是帶有這些的CSS屬性的元素 {{cssxref("position","position:absolute")}} or {{cssxref("position","position:fixed")}}.</p> + +<div class="warning"> +<p><strong>警告:</strong> 這個屬性被遺棄了. 請改用 {{cssxref("clip-path")}} .</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: 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; +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code><shape></code></dt> + <dd>A rectangular {{cssxref("<shape>")}} of the form <code>rect(<top>, <right>, <bottom>, <left>)</code> or of the form <code>rect(<top> <right> <bottom> <left>)</code> (which is a more backwards compatible syntax) <code><top></code> and <code><bottom></code> specify offsets from the <em>inside top border edge</em> of the box, and <code><right></code>, and <code><left></code> specify offsets from the <em>inside left border edge</em> of the box — that is, the extent of the padding box.</dd> + <dd><code><top></code>, <code><right></code>, <code><bottom></code>, and <code><left></code> may either have a {{cssxref("<length>")}} value or<code> auto</code>. If any side's value is <code>auto</code>, the element is clipped to that side's <em>inside border edge</em>.</dd> + <dt><code>auto</code></dt> + <dd>The element does not clip (default value). Note that this is distinct from <code>rect(auto, auto, auto, auto)</code>, which does clip to the inside border edges of the element.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Examples">Examples</h2> + +<pre class="brush:css">.dotted-border { + border: dotted; + position: relative; + width: 536px; + height: 350px; +} + +#top-left, #middle, #bottom-right { + position: absolute; + top: 0px; +} + +#top-left { + left: 360px; + clip: rect(0px, 175px, 113px, 0px); +} + + +#middle { + left: 280px; + clip: rect(119px, 255px, 229px, 80px); + /* standard syntax, unsupported by Internet Explorer 4-7 */ +} + +#bottom-right { + left: 200px; + clip: rect(235px 335px 345px 160px); + /* non-standard syntax, but supported by all major browsers*/ +}</pre> + +<pre class="brush:html"><p class="dotted-border"> + <img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Original Graphic" /> + <img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to upper left"> + <img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped towards middle"> + <img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to bottom right"> +</p></pre> + +<p>{{EmbedLiveSample('Examples', '689px', '410px')}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Masks', '#clip-property', 'clip')}}</td> + <td>{{Spec2('CSS Masks')}}</td> + <td>Deprecates <code>clip</code> property, suggests {{cssxref("clip-path")}} as replacement.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'clip')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Defines <code>clip</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visufx.html#clipping', 'clip')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>1.0 (1.0)</td> + <td>4.0[1]</td> + <td>7.0</td> + <td>1.0 (85)[1]</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Internet Explorer up to version 7.0 and Safari up to at least 5.1.7 incorrectly interpret <code>clip: auto</code> as <code>clip: rect(auto, auto, auto, auto)</code>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Related CSS properties: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("overflow")}}, {{Cssxref("display")}}, {{Cssxref("position")}}</li> +</ul> |