5 個簡單實用的CSS 屬性

這篇文章介紹了5 個實用的CSS屬性。你應該很熟悉，但很可能很少會使用。我並不是說展望全新的CSS3 屬性，我指的是舊的CSS2 中的屬性，例如：clip，min-height，white-space，curosr 和display 等一些被所有瀏覽器廣泛支援的屬性。因此，千萬不要錯過這篇文章，因為你可能發現它們竟然有如此之大的用途。

1、CSS Clip

剪輯(clip) 屬性就像一個面具。它允許你使用矩形來掩蓋頁面元素的內容。要剪輯一個元素：你必須指定其position 屬性為absolute，然後指定相對於元素的 top，right，bottom，left 值。

圖片剪輯實例（ 示範）

以下範例示範如何使用clip 屬性掩蓋一張圖片。首先，指定<div> 元素為position:relative，然後指定<img> 元素為position:absolute，並且根據實際需要設定rect 值。

.clip {
position: relative;
height: 130px;
width: 200px;
border: solid 1px #ccc;
}
.clip img {
position: absolute;
clip: rect(30px 165px 100px 30px);
}

影像調整尺寸和剪輯（ 示範）

在這個範例中，我將展示如何調整影像尺寸和剪輯圖片。素材圖片是矩形的，我想將其削減至50％ 的尺寸，用來創建一個正方形格式的縮圖。因此，我用寬度和高度屬性來調整影像，並使用clip 剪輯屬性予以掩蓋。然後用left 屬性將圖片移開左側15px 的距離。

.

gallery li {
float: left;
margin: 0 10px 0 0;
position: relative;
width: 70px;
height: 70px;
border: solid 1px #000;
}
.gallery img {
width: 100px;
height: 70px;
position: absolute;
clip: rect(0 85px 70px 15px);
left: -15px;
}