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

::-Webkit-Input-Placeholder

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

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

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}
 

@Impor 巢狀樣式表文件

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

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

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

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

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

Contenteditable 設定Element是否可編輯

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

Webkit-Playsinline

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

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

Position: Absolute， 讓Margin有效的

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

div {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}
 

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

.clearfix {
	zoom: 1;
}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
 }

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

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

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

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

::-Webkit-Scrollbar-Thumb

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

-Webkit-Appearance:none

1. To apply platform specific styling to an element that doesn’t have it by default
2. To remove platform specific styling to an element that does have it by default

移除瀏覽器預設的樣式，比如chrome的input預設樣式

input, button, textarea, select {
	*font-size: 100%;
	-webkit-appearance:none;
}

CSS開啟硬體加速

-webkit-transform: translateZ(0);

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

-webkit-backface-visibility: hidden;

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

-webkit-touch-callout: none;

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

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

Perspective 透視

這個屬性的存在決定你看到的元素是2d還是3d。一般設定在包裹元素的父類上。

.div-box {
	perspective: 400px; 
}

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

//不換行
white-space:nowrap;

//自動換行
word-wrap: break-word; 
word-break: normal; 

//強制換行
word-break:break-all;

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

{
    box-sizing: border-box;
}

Calc() Function, 計算屬性值

div {
    width: calc(100% - 100px);
}

上面的例子就是讓寬度為100%減去100px的值，專案中很適用，要IE9以上相容。

廣州VI設計公司https://www.houdianzi.com

Css3 Linear-Gradient 線性漸變

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

div {
    linear-gradient(red, yellow)
}

background: linear-gradient(direction, color-stop1, color-stop2, ...);

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

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

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