15.
實用CSS技巧
一、強制縮圖
- 為避免使用者插入過大圖片,可利用CSS來將之強制縮圖!
- div. className img {
max-width: 500px;
width:expression(this.width > 500? "500px" : this.width);
overflow:hidden;
}
- div. className img中的500則是指定圖片寬度上限,超過此上限,會強制縮到500px,這樣就不用擔心被圖稱破版面了。
- 「max-width」IE不支援,所以才用CSS Expression來讓IE縮放寬度
- IE 8 版本在標準模式下,不再支援CSS Expression
二、強制縮字
- 由於網頁換行是根據空白來換行,因此,若輸入連續字母,將因為沒有空白而導致無法換行,因而撐破版面,此時可用下法來解決:
- div. className {
table-layout: fixed;
word-wrap: break-word;
width: 540px;
overflow: hidden;
}
- 其中div. className 裡的540px代表您的評論內容最大寬度,裡面的文字若超過此大小會被強迫換行。
三、文字陰影
- .blockTitle {
font-size:16px;
color:#000000;
text-shadow: #cfcfcf 1px 1px 0px;
filter: progid:DXImageTransform.Microsoft.Shadow (color="#cfcfcf", strength="3", direction="135");
}
- text-shadow是CSS3屬性,僅IE不支援,四個署性質:水平位置、儲值位置、模糊程度、陰影顏色。
- filter: progid:DXImageTransform.Microsoft.Shadow則是IE專用濾鏡,用來產生陰影效果。