這篇文章介紹了5 個實用的CSS屬性。你應該很熟悉,但很可能很少會使用。我並不是說展望全新的CSS3 屬性,我指的是舊的CSS2 中的屬性,例如:clip,min-height,white-space,curosr 和display 等一些被所有瀏覽器廣泛支援的屬性。因此,千萬不要錯過這篇文章,因為你可能發現它們竟然有如此之大的用途。
1、CSS Clip
剪輯(clip) 屬性就像一個面具。它允許你使用矩形來掩蓋頁面元素的內容。要剪輯一個元素:你必須指定其position 屬性為absolute,然後指定相對於元素的 top,right,bottom,left 值。
圖片剪輯實例( 示範)
以下範例示範如何使用clip 屬性掩蓋一張圖片。首先,指定
.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;
}