昨天整理了一篇  《關於CSS的書寫規範和順序》  ，裡面提到 CSS 的一些常用命名、規範等等，而今天主要是說一些偏門一點的 CSS 樣式、技巧。

什麼是偏門，就是有些片段很少使用，時間久了就記不起來，但用的時候又要去找，所以這裡為大家整理一些少用但又實用的 CSS 樣式，

::-Webkit-Input-Placeholder

input 的 H5 placeholder 屬性，很好用，但不能直接改這個文字顏色，所以目前的解決方法就是用::input-placeholder屬性來改。

小Tips: 配合 opacity 屬性使用效果更佳哦！

 1 ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
 2   color: pink;
 3 }
 4 ::-moz-placeholder { /* Firefox 19+ */
 5   color: pink;
 6 }
 7 :-ms-input-placeholder { /* IE 10+ */
 8   color: pink;
 9 }
10 :-moz-placeholder { /* Firefox 18- */
11   color: pink;
12 }

@Impor 巢狀樣式表文件

使用它可以在樣式表再次內巢狀樣式表文件，比如一些元件 CSS 可以使用，但不太推薦使用這個，因為載入時有可能會被漏掉。

1 @import url("reset.css");
2 @import url("global.css");  
3 @import url("font.css");

Outline 當點選Input元素時顯示的當前狀態線（外發光）

這個狀態線是用來提示使用者當前狀態指示作用，但因為效果很美觀，建議去掉，或自己改個樣式

1 div {
2     outline: none; //移動瀏覽器預設的狀態線
3     // outline: 5px dotted red; 也可以設定樣式
4 }

Contenteditable 設定Element是否可編輯

 1 <p contenteditable="true">可編輯</p> 

true 為可編輯， false 為不可編輯

Webkit-Playsinline

手機video 都可以在頁面中播放，而不是全屏播放了。

1 <video id="myvideo" src="test.mp4" webkit-playsinline="true"></video>

Position: Absolute， 讓Margin有效的

設定left:0, right:0 就可以。原因是2邊都是0不存在邊距，element就可以得出距離，並居中。

1 div {
2     position: absolute;
3     left: 0;
4     right: 0;
5     margin: 0 auto;
6 }

使用 Clearfix 清除浮動，解決父類高度崩塌

 1 .clearfix {
 2     zoom: 1;
 3 }
 4 
 5 .clearfix:after {
 6      visibility: hidden;
 7      display: block;
 8      font-size: 0;
 9      content: " ";
10      clear: both;
11      height: 0;
12  }

User-Select 禁止使用者選中文字

1 div {
2  user-select: none; /* Standard syntax */ 
3  }

清除手機Tap事件後Element 時候出現的一個高亮 

1 *{ 
2  -webkit-tap-highlight-color: rgba(0,0,0,0); 
3  }

::-Webkit-Scrollbar-Thumb

可以修改谷歌的滾動條樣式，safari好像也可以

使用CSS Transforms 或者 Animations時可能會有頁面閃爍的Bug

1  1 -webkit-backface-visibility: hidden;

-Webkit-Touch-Callout 禁止長按連結與圖片彈出選單

1  1 -webkit-touch-callout: none;

Transform-Style: Preserve-3d 讓元素支援3d

1 div {
2     -webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
3     -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
4     transform: rotateY(60deg);
5     transform-style: preserve-3d;
6 }

Css實現不換行、自動換行、強制換行

1 //不換行
2 white-space:nowrap;
3 
4 //自動換行
5 word-wrap: break-word; 
6 word-break: normal; 
7 
8 //強制換行
9 word-break:break-all;

Box-Sizing 讓元素的寬度、高度包含Border和Padding

1 { box-sizing: border-box; }

Css3 Linear-Gradient 線性漸變

預設開始在top, 也可以自定義方向。

1 div {
2     linear-gradient(red, yellow)
3 }
4 background: linear-gradient(direction, color-stop1, color-stop2, ...);

常用的選擇器 :Nth-Child() Selector

以下程式碼是選擇父類下第一個子節點，p元素，建議學習這個樣式屬性的使用，很實用的。

1 p:nth-child(1) {
2     ...
3 }

 就總結到這裡，以後會不斷更新，如果有好的 CSS 程式碼，歡迎在留言處提交給我，一起收錄進來！

&n