CSS 彙整 - 第 2 頁，總計 3 頁 - VECTOR COOL 威得數位行銷

.gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}

[……]

CSS3 鏡射

<style>

/* 水平鏡射 */
.flipx {
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    filter:FlipH;
}

/* 垂直鏡射 */
.flipy {
    -moz-transform:scaleY(-1);
    -webkit-transform:scaleY(-1);
    -o-transform:scaleY(-1);
    transform:scaleY(-1);
    filter:FlipV;
}

</style>

[……]

html IE
tag 出現詭異方框

客戶反映在IE結尾都有奇怪的框框，原來還有人在用IE阿？

好吧！想辦法解決

原本以為這是邊框，所以天真的想說CSS加個 border:none 就解了，果然是我太天真，完全沒動！！

Google 一下，這似乎跟網路字型的Bug有關，使用下方的 CSS 就解囉

 
/* https://vector.cool */
/* 消除 IE <br> 的詭異框框 */

br {
    font-family: unset !important;
    font: unset !important;
}

下圖，詭異的框框都不見了。

[……]

CSS 強制換行及強制不換行、強制全部、單詞、單字

介紹三種換行方式

<style>

/* 強制不換行 */
div{
	white-space:nowrap;
}

/* 強制斷行 (英文單詞) */
div{
	word-wrap:break-word;
	word-break:normal;
}

/* 強制英斷行 (英文單字) */
div{
	word-break:break-all;
}

</style>

[……]

HTML 錨點偏移 CSS and JS 兩種方法 (offset anchor tag link)

HTML提供了一個錨點連結的功能 (anchor tag link)，換頁或不換頁，都可以把瀏覽器卷軸自動捲到錨點位置，但如果網頁上方有一個黏頭的Header (sticky header)，RWD手機版本則習慣使用(sticky header)，Header 懸浮本文之上，可能會把錨點的元素內容遮蔽，這時我們則需要偏移(sticky header)的高度，避免錨點元素被遮蔽。[……]