|
這篇文章介紹了 5 個(gè)實(shí)用的 CSS 屬性。你應(yīng)該很熟悉，但很可能很少會(huì)使用到。我并不是在談?wù)撜雇碌?CSS3 屬性，我指的是舊的 CSS2 中的屬性，如：clip，min-height，white-space，curosr 和 display 等一些被所有瀏覽器廣泛支持的屬性。因此，千萬(wàn)不要錯(cuò)過(guò)這篇文章，因?yàn)槟憧赡馨l(fā)現(xiàn)它們竟有如此之大的用途。
1、CSS Clip
剪輯 (clip) 屬性就像一個(gè)面具。它允許你使用矩形掩蓋頁(yè)面元素的內(nèi)容。要剪輯一個(gè)元素：你必須指定其 position 屬性為 absolute，然后指定相對(duì)于元素的 top，right，bottom，left 值。
圖片剪輯實(shí)例（演示）
以下示例演示了如何使用 clip 屬性掩蓋一張圖片。首先，指定 <div> 元素為 position:relative，然后指定 <img> 元素為 position:absolute，并且根據(jù)實(shí)際需要設(shè)定 rect 值。
.clip {
position: relative;
height: 130px;
width: 200px;
border: solid 1px #ccc;
}
.clip img {
position: absolute;
clip: rect(30px 165px 100px 30px);
} 圖像調(diào)整尺寸和剪輯（演示）
在這個(gè)示例中，我將展示如何調(diào)整圖像尺寸和剪輯圖片。素材圖片是矩形的，我想將其削減至 50％ 的尺寸，用來(lái)創(chuàng)建一個(gè)正方形格式的縮略圖。因此，我用寬度和高度屬性來(lái)調(diào)整圖像，并使用 clip 剪輯屬性予以掩蓋。然后用 left 屬性將圖片移開左側(cè) 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;
}
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) 5 個(gè)簡(jiǎn)單實(shí)用的 CSS 屬性 [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 5 個(gè)簡(jiǎn)單實(shí)用的 CSS 屬性 [1]
第 2 頁(yè) 
