1. 文字超出部分顯示省略號

單行文本的溢出顯示省略號（一定要有寬度）

多行文本溢出顯示省略號

2.中英文自動換行

word-break:break-all;只對英文起作用，以字母作為換行依據

word-wrap:break-word; 只對英文起作用，以單詞作為換行依據

white-space:pre-wrap; 只對中文起作用，強制換行

white-space:nowrap; 強制不換行，都起作用

3.文字陰影

text-shadow 為網頁字體添加陰影，通過對text-shadow屬性設置相關的屬性值。

屬性與值的說明如下：

text-shadow: [X-offset,Y-offset,Blur,Color];

X-offset:指陰影居于字體水平偏移的位置。

Y-offset:指陰影居于字體垂直偏移的位置。

Blur:指陰影的模糊值。?

color:指陰影的顏色；

h1{ text-shadow: 5px 5px 5px #FF0000; }

4.設置placeholder的字體樣式

5.不固定高寬 div 垂直居中的方法

方法一：偽元素和 inline-block / vertical-align（兼容 IE8）

方法二：flex(不兼容 ie8 以下)

方法三：transform(不兼容 ie8 以下)

方法四：設置 margin:auto（該方法得嚴格意義上的非固定寬高，而是 50%的父級的寬高。）

6.解決IOS頁面滑動卡頓

7.設置滾動條樣式

8.實現隱藏滾動條同時又可以滾動

9.css 繪制三角形

效果如下：

實現帶邊框的三角形：

效果如下：

注: 如果想繪制右直角三角，則將左 border 設置為 0；如果想繪制左直角三角，將右 border 設置為 0 即可（其它情況同理）。

10.Table表格邊框合并

11.CSS 選取第 n 個標簽元素

first-child first-child 表示選擇列表中的第一個標簽。 last-child last-child 表示選擇列表中的最后一個標簽 nth-child(3) 表示選擇列表中的第 3 個標簽 nth-child(2n) 這個表示選擇列表中的偶數標簽 nth-child(2n-1) 這個表示選擇列表中的奇數標簽 nth-child(n+3) 這個表示選擇列表中的標簽從第 3 個開始到最后。 nth-child(-n+3) 這個表示選擇列表中的標簽從 0 到 3，即小于 3 的標簽。 nth-last-child(3) 這個表示選擇列表中的倒數第 3 個標簽。

使用方法：

li:first-child{}

12.移動端軟鍵盤變?yōu)樗阉鞣绞?/p>

默認情況下軟鍵盤上該鍵位為前往或者確認等文字，要使其變?yōu)樗阉魑淖?，需要?input 上加上 type 聲明：

需要一個 form 標簽套起來,并且設置 action 屬性,這樣寫完之后輸入法的右下角就會自動變成搜索,同時，使用了 search 類型后，搜索框上會默認自帶刪除按鈕。

13.onerror 處理圖片異常

使用 onerror 異常處理時，若 onerror 的圖片也出現問題，則圖片顯示會陷入死循環(huán)，所以要在賦值異常圖片之后，將地址置空

14.背景圖片的大小

15.文字之間的間距

16.元素占滿整個屏幕

heigth如果使用100%，會根據父級的高度來決定，所以使用100vh單位。

17.CSS實現文本兩端對齊

18.實現文字豎向排版

19.使元素鼠標事件失效

20.禁止用戶選擇

21.使用硬件加速

在瀏覽器中用css開啟硬件加速，使GPU (Graphics Processing Unit) 發(fā)揮功能，從而提升性能。硬件加速在移動端尤其有用，因為它可以有效的減少資源的利用。

目前主流瀏覽器會檢測到頁面中某個DOM元素應用了某些CSS規(guī)則時就會開啟，最顯著的特征的元素的3D變換。如果不使用3D變形，我們可以通過下面方式來開啟：

22.頁面動畫出現閃爍問題

在 Chrome and Safari中，當我們使用CSS transforms 或者 animations時可能會有頁面閃爍的效果，下面的代碼可以修復此情況：

在webkit內核的瀏覽器中，另一個行之有效的方法是

23.字母大小寫轉換

24.將一個容器設為透明

25.消除transition閃屏

26.識別字符串里的 '\n' 并換行

一般在富文本中返回換行符不是<br>的標簽，而且\n。不使用正則轉換的情況下，可通過下面樣式實現換行。

27.移除a標簽被點鏈接的邊框

29.select內容居中顯示、下拉內容右對齊

30.修改input輸入框中光標的顏色不改變字體的顏色

31.子元素固定寬度 父元素寬度被撐開

32.讓div里的圖片和文字同時上下居中

這里不使用flex布局的情況。通過vertival-align

33.實現寬高等比例自適應矩形

34.transfrom的rotate屬性在span標簽下失效

35.css加載動畫

主要是通過css旋轉動畫的實現：

實現如下效果：

36.文字漸變效果實現

37.好看的邊框陰影

38.好看的背景漸變

效果如下：

編輯

39.實現立體字的效果

效果如下：

編輯切換為居中

40.全屏背景圖片的實現

41.實現文字描邊的2種方法

方式一：

方式二：

42.元素透明度的實現

使用rgba()設置顏色透明度

說明：RGBA 是代表Red（紅色） Green（綠色） Blue（藍色）和 Alpha（不透明度）三個單詞的縮寫。

43.解決1px邊框變粗問題

Ps：出現1px變粗的原因，比如在2倍屏時1px的像素實際對應2個物理像素。

44.CSS不同單位的運算

css自己也能夠進行簡單的運算，主要是用到了calc這個函數。實現不同單位的加減運算：

45.CSS實現文字模糊效果

效果如下：

這是一段被模糊的文字，你可能無法看清喲。

46.通過濾鏡讓圖標變灰

一張彩色的圖片就能實現鼠標移入變彩色，移出變灰的效果。

47.圖片自適應object-fit

當圖片比例不固定時，想要讓圖片自適應，一般都會用background-size:cover/contain，但是這個只適用于背景圖。css3中可使用object-fit屬性來解決圖片被拉伸或是被縮放的問題。使用的提前條件：圖片的父級容器要有寬高。

fill: 默認值。內容拉伸填滿整個content box, 不保證保持原有的比例。

contain: 保持原有尺寸比例。長度和高度中長的那條邊跟容器大小一致，短的那條等比縮放，可能會有留白。

cover: 保持原有尺寸比例。寬度和高度中短的那條邊跟容器大小一致，長的那條等比縮放?？赡軙胁糠謪^(qū)域不可見。（常用）

none: 保持原有尺寸比例。同時保持替換內容原始尺寸大小。

scale-down:保持原有尺寸比例,如果容器尺寸大于圖片內容尺寸，保持圖片的原有尺寸，不會放大失真；容器尺寸小于圖片內容尺寸，用法跟contain一樣。

48.行內標簽元素出現間隙問題

方式一：父級font-size設置為0

方式二：父元素上設置word-spacing的值為合適的負值

其它方案：1將行內元素寫為1行(影響閱讀)；2使用浮動樣式（會影響布局）。

49.解決vertical-align屬性不生效

在使用vertical-align:middle實現垂直居中的時候，經常會發(fā)現不生效的情況。這里需要注意它生效需要滿足的條件：

作用環(huán)境：父元素設置line-height。需要和height一致。或者將display屬性設置為table-cell，將塊元素轉化為單元格。作用對象：子元素中的inline-block和inline元素。

Ps：vertical-align不可繼承，必須對子元素單獨設置。同時需要注意的是line-height的高度基于font-size（即字體的高度），如果文字要轉行會出現異常哦。