:::

15. 實用CSS技巧

一、強制縮圖

  1. 為避免使用者插入過大圖片,可利用CSS來將之強制縮圖!
  2. div. className img {
      max-width: 500px;
      width:expression(this.width > 500? "500px" : this.width);
      overflow:hidden;
    }
  3. div. className img中的500則是指定圖片寬度上限,超過此上限,會強制縮到500px,這樣就不用擔心被圖稱破版面了。
  4. 「max-width」IE不支援,所以才用CSS Expression來讓IE縮放寬度
  5. IE 8 版本在標準模式下,不再支援CSS Expression

二、強制縮字

  1. 由於網頁換行是根據空白來換行,因此,若輸入連續字母,將因為沒有空白而導致無法換行,因而撐破版面,此時可用下法來解決:
  2. div. className {
      table-layout: fixed;
      word-wrap: break-word;
      width: 540px;
      overflow: hidden;
    }
  3. 其中div. className 裡的540px代表您的評論內容最大寬度,裡面的文字若超過此大小會被強迫換行。

三、文字陰影

  1. .blockTitle {
      font-size:16px;
      color:#000000;
      text-shadow: #cfcfcf 1px 1px 0px;
      filter: progid:DXImageTransform.Microsoft.Shadow (color="#cfcfcf", strength="3", direction="135");
      }
  2. text-shadow是CSS3屬性,僅IE不支援,四個署性質:水平位置、儲值位置、模糊程度、陰影顏色。
  3. filter: progid:DXImageTransform.Microsoft.Shadow則是IE專用濾鏡,用來產生陰影效果。

:::

搜尋


書籍目錄

展開 | 闔起

線上使用者

16人線上 (7人在瀏覽線上書籍)

會員: 2

訪客: 14

tad, person100_goo,

更多…