偏門卻又實用的 CSS 樣式

標籤：解決方案   開發   test   and   scroll   選取器   清除   ott   pad   

偏門卻又實用的 CSS 樣式2017-05-18 web前端開發今天跟大家說一些偏門一點的 CSS 樣式、技巧。什麼是偏門？就是有些片段很少使用，時間久了就記不起來，但用的時候又要去找，所以這裡為大家整理一些少用但又實用的 CSS 樣式。::-Webkit-Input-Placeholderinput 的 H5 placeholder 屬性，很好用，但不能直接改這個文字顏色，所以目前的解決方案就是用::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可以修改Google的捲軸樣式，safari好像也可以-Webkit-Appearance:noneTo apply platform specific styling to an element that doesn’t have it by defaultTo 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開啟硬體加速http://www.cnblogs.com/rubylouvre/p/3471490.html-webkit-transform: translateZ(0);使用CSS Transforms 或者 Animations時可能會有頁面閃爍的Bug-webkit-backface-visibility: hidden;-Webkit-Touch-Callout 禁止長按連結與圖片快顯功能表-webkit-touch-callout: none;Transform-Style: Preserve-3d 讓元素支援3ddiv {    -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, 計算屬性值https://www.w3schools.com/cssref/func_calc.aspdiv {    width: calc(100% - 100px);}上面的例子就是讓寬度為100%減去100px的值，項目中很適用，要IE9以上相容。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) {    ...}就介紹到這裡，以後會不斷更新，如果有好的 CSS 代碼，歡迎在留言處提交給我們，一起收錄進來！

　　

偏門卻又實用的 CSS 樣式