特殊效果

CSS 位置層級的裁切、滿溢和顯示與否的特性使網頁想建置特別效果時，變的容易許多。裁切的屬性讓您顯示出重疊的區域，滿溢的屬性讓您指定事件在任一物件上，而且不必去調整範圍框的高度及寬度，顯示與否的屬性能使物件是否要隱藏起來，這個屬性很強大，當我們程式碼執行到某一部份時隱藏起物件，就好像這個物件從來就不曾出現過。

下面的例子，我們建立了一個 span 元件，取名為 hidden 並且利用 visibility 屬性使其暫時隱藏起來。您在流覽器上看不到這些文字。但您注意到接下來我們會空出畫面來‧接下來的元件取名為 overflow 屬性 overflow 也是隱藏。標籤的範湋框比文字來的小一點，所以文字會被切掉部份，接下來兩個元件示範了裁切‧最後一個元件放置在另一個之前，但是這個元件被裁切成一個小範湋，因此，底下那層的內容就有部份可以顯示出來了。

<HTML>
<HEAD>
<STYLE type="text/css">
<!--
.hidden
        {
        position: relative;
        visibility: hidden
        }

.overflow
        {
        position: absolute;
        top: 210px;
        left: 60px;
        width: 40px;
        height: 40px;
        background-color: yellow;
        overflow: hidden
        }

.plain
        {
        position: absolute;
        top: 200px;
        left: 200px;
        width: 150px;
        height: 150px;
        background-color: #eeeeee;
        }

.clip
        {
        position: absolute;
        top: 200px;
        left: 200px;
        width: 150px;
        height: 150px;
        color: yellow;
        background-color: blue;
        clip: rect(25px 125px 125px 25px);
        }
-->
</STYLE>
</HEAD>

<BODY>
<SPAN class="hidden">這裡有文字,</SPAN> <=左邊其實有一段字,但是被設為不顯示
<DIV class="overflow">框太小字太多,滿溢的效果會把部份字隱藏起來</DIV>
<DIV class="plain"> 這段文字上頭蓋一塊藍色的區域但是因為藍色區域部份被裁切掉了,沒被遮住的地方文字顯示出來</DIV>

DIV class="clip"我們設定一段黃色的文字放在這個框之中,清楚顯示被裁切的效果</DIV>
</BODY>
</HTML>

參閱 CSS 屬性一覽表列出所有屬性及內含值

上一頁:圖層的重疊效果

下一頁:CSS 屬性一覽表

同意轉載，不過麻煩看一下轉載需知

給個回應

姓名:
佈落格網址:
	如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容:

以下為本站文章分類清單

以下為本站側欄內容

以下為最近發表的文章

以下為本頁本文內容

特殊效果

以下為文章回應區