Warning:
This wiki has been archived and is now read-only.
CSS2/visufx
視覺效果
内容概要
溢出與剪裁
一般來說，一個塊盒的內容的顯示侷限在盒的內容邊內，但是在某些情況下，盒可能會溢出，也就是盒的內容部份甚至完全跑到盒的外面，例如：
- 無法斷行造成行盒比塊盒還寬。
- 塊級盒比包含塊還寬。這可能發生在元素有一個會讓生成塊盒跑出包含塊界線的 'width' 屬性值的時候。
- 元素的高度超過直接指定高度的包含塊（也就是，包含塊的高度由 'height' 而不是內容高度決定的時候）。
- 子孫盒透過絕對定位部份跑到盒外。這種盒的祖先不總是用 'overflow' 屬性剪裁這種盒 ― 具體來說，在這種盒與它的包含塊之間的任何祖先不會因為溢出剪裁這種盒。
- 子孫盒的負邊界讓該盒部份定位在盒外。
- 'text-indent' 屬性讓行內盒懸掛在塊盒的左邊或右邊。
當溢出發生時，'overflow' 指定一個盒要不要用邊框邊剪裁，也指定有剪裁的時後要不要提供用捲動機制來讓使用者存取被剪掉的內容。
溢出 ― 'overflow' 屬性
'overflow'
| 取值： | hidden | scroll | auto | inherit |
| 初始： | visible |
| 適用於： | 塊容器 |
| 繼承： | 否 |
| 百分比： | （不適用） |
| 媒介： | 視覺 |
| 計算值： | 同指定值 |
當塊容器元素的內容溢出元素的盒的時候，這個屬性可以用來指定使用者代理會不會剪裁該內容。除了某些子嗣元素（包含塊是視口或是指定元素的祖先）與其內容與子嗣以外，這個屬性影響元素的所有內容。本屬性各取值的意義如下：
visible
hidden
scroll
auto
就算 'overflow' 設置為 'visible'，原生作業系統可能用 UA 的文件視窗剪裁內容。
使用者代理必須將設在根元素的 'overflow' 值使用於視口上。若根元素是 HTML "HTML" 元素或 XHTML "html" 元素且根元素有一個子節點是 HTML "BODY" 或 XHTML "body"，則若根元素上的取值是 'visible'，使用者代理必須改用這一個這種子節點上 'overflow' 的值於視口上。使用者代理必須將視口上的 'value' 值以 'auto' 解讀。傳值給視口的元素 'overflow' 的使用值必須為 'visible'。
在使用者代理於元素盒的邊設置滾動條的情況下，使用者代理應該將滾動條插入至內邊框邊與外邊界邊的中間。使用者代理應該將滾動條占的空間從元素形成的包含塊中拿掉（從相應的邊減掉）。
<div>
<blockquote>
<p>I didn't like the play, but then I saw
it under adverse conditions - the curtain was up.</p>
<cite>- Groucho Marx</cite>
</blockquote>
</div>
以下樣式表控制產生的盒的大小與樣式：
div { width : 100px; height: 100px;
border: thin solid red;
}
blockquote { width : 125px; height : 100px;
margin-top: 50px; margin-left: 50px;
border: thin dashed black
}
cite { display: block;
text-align : right;
border: none
}
'overflow' 的初始值是 'visible'，因此使用者代理不剪裁 <blockquote>，就像這樣：
另一方面，將 <div> 的 'overflow' 設成 'hidden' 會讓使用者代理用 <div> 剪裁 <blockquote>：
最後，考慮有絕對定位元素跟已溢出的父元素的情形。
樣式表：
container { position: relative; border: solid; }
scroller { overflow: scroll; height: 5em; margin: 5em; }
satellite { position: absolute; top: 0; }
body { height: 10em; }
文件片段：
<container>
<scroller>
<satellite/>
<body/>
</scroller>
</container>
在這個例子中，因為 "statellite" 元素的包含塊在 "srollbar" 元素之外（"scrollbar" 中溢出的內容會被剪掉但是可以透過捲動瀏覽），使用 "scroller" 元素的滾動條不會捲動 "satellite" 元素。
剪裁 ― 'clip' 屬性
剪裁範圍是指元素邊框盒可見的部份。在預設狀態下，使用者代理不剪裁元素，但是網頁作者可直接透過 'clip' 屬性設定剪裁範圍。
'clip'
| 取值： | <shape> | auto | inherit |
| 初始： | auto |
| 適用於： | 絕對定位元素 |
| 繼承： | 否 |
| 百分比： | （不適用） |
| 媒介： | 視覺 |
| 計算值： | 若指定值為 'auto'，則計算值為 'auto'，否則計算值是一個有四個取值的長方形，其中各個值如果原先指定植是 'auto' 則計算值為 'auto'，否則為計算長度。 |
'clip' 屬性僅適用於絕對定位元素。本屬性各取值的意義如下：
auto
<shape>
網頁作者可把 <length> 值或 'auto' 當作 <top>、<right>、<bottom> 和 <left> 用。本規範允許負的長度。'auto' 值代表剪裁範圍對應的邊會是元素生成的邊框盒的邊（也就是，'auto' 值在 <top> 和 <left> 的地方與 '0' 相等，在 <bottom> 的地方與高度的使用值加垂直邊距與邊框寬度的總和相同，在 <right> 的地方與寬度的使用值加水平邊距與邊框寬度的總和相同，使得四個 'auto' 值會讓剪裁範圍變成與元素的邊框盒相同）。
在將座標四捨五入成像素座標時，使用者代理應該注意在 <left> 與 <right> 有相同取值（或是 <top> 與 <bottom> 有相同取值）的情況下沒有任何可見像素，反過來說使用者代理應該注意在這些值是 'auto' 的時候，元素的邊框盒沒有隱藏的像素。使用者代理用一個元素的剪裁範圍剪去元素任何在剪裁區域外面的部份（例：內容、子節點、背景、邊框、文字裝飾、外框、可見捲動機制）。被減去的內容不會造成溢位。
元素的祖先也可能剪裁自己的內容（例：透過自己的 'clip' 屬性或自己不是 'visible' 的 'overflow' 值）― 瀏覽器會渲染交集。
若剪裁範圍超出 UA 文件視窗的邊界，原生作業系統可能用視窗剪裁內容。
p#one { clip: rect(5px, 40px, 45px, 5px); }
p#two { clip: rect(5px, 55px, 45px, 5px); }
會各自產生在下面闡釋中虛線圍起來的長方形剪裁區域：
可見性 ― 'visibility' 屬性
'visibility'
| 取值： | hidden | collapse | inherit |
| 初始： | visible |
| 適用於： | 所有元素 |
| 繼承： | 是 |
| 百分比： | （不適用） |
| 媒介： | 視覺 |
| 計算值： | 同指定值 |
'visiblity' 屬性可以用來指定使用者代理是否渲染元素產生的盒。不可見的盒仍然會影響布局（不然可以設 'display' 為 'none' 讓元素不產生盒）。本屬性各取值的意義如下：
visible
hidden
collapse
網頁作者可配合腳本使用本屬性來製作動態效果。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD><TITLE>Dynamic visibility example</TITLE>
<META
http-equiv="Content-Script-Type"
content="application/x-hypothetical-scripting-language">
<STYLE type="text/css">
<!--
#container1 { position: absolute;
top: 2in; left: 2in; width: 2in }
#container2 { position: absolute;
top: 2in; left: 2in; width: 2in;
visibility: hidden; }
-->
</STYLE>
</HEAD>
<BODY>
<P>Choose a suspect:</P>
<DIV id="container1">
<IMG alt="Al Capone"
width="100" height="100"
src="suspect1.png">
<P>Name: Al Capone</P>
<P>Residence: Chicago</P>
</DIV>
<DIV id="container2">
<IMG alt="Lucky Luciano"
width="100" height="100"
src="suspect2.png">
<P>Name: Lucky Luciano</P>
<P>Residence: New York</P>
</DIV>
<FORM method="post"
action="http://www.suspect.org/process-bums">
<P>
<INPUT name="Capone" type="button"
value="Capone"
onclick='show("container1");hide("container2")'>
<INPUT name="Luciano" type="button"
value="Luciano"
onclick='show("container2");hide("container1")'>
</FORM>
</BODY>
</HTML>