整理一些常常用到的 css 語法，方便之後切版使用。

  1. 清單項目分隔線
    在清單項目之間使用框線做分隔，用 item + item 避開第一個項目。

    1
    li + li { border-top: 1px solid black; }

  2. 圖片取代文字
    因為瀏覽器會去渲染超大的寬度，所以不使用 text-indent:-9999px;語法，改用下列語法以增加效能。

    1
    2
    3
    4
    5
    .hide-text {
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
    }

    參考資料
    REPLACING THE -9999PX HACK

  3. 溢出文字省略變顯示省略符號 (…)

    1
    2
    3
    4
    overflow : hidden;
    text-overflow : ellipsis;
    white-space : nowrap;
    width : 300px;

  4. Clearfix 清除浮動

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .clearfix:before, .clearfix:after {
    	content:"";
    	display:table;
    }
    .clearfix:after{
    	clear:both;
    	overflow:hidden;
    }
    .clearfix{
        zoom:1;
    }

  5. iOS 的 scroll bar.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    ::-webkit-scrollbar {
        width: 15px;
        height: 15px;
        border-bottom: 1px solid #eee;
        border-top: 1px solid #eee;
    }
    ::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background-color: #C3C3C3;
        border: 2px solid #eee;
    }

    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
    }