css有些屬性容易忘記，半天不寫就要去查api，有時候api還不好使，于是還是記下來以后方便用，后續(xù)會慢慢補充進來的。
outline移除當選中input元素的時候會出現(xiàn)狀態(tài)線
An outline is a line that is drawn around elements (outside the borders) to make the element"stand out".包裹elements 的一個線，一般設(shè)置成none 。div {outline: none;//一般情況下移除它// outline: 5px dotted red; 也可以設(shè)置樣式}
contenteditable設(shè)置element是否可編輯
可編輯
webkit-playsinline
手機video 都可以在頁面中播放，而不是全屏播放了。
position: absolute， 讓margin有效的
設(shè)置left:0,right:0margin:0auto; 就可以。原因是2邊都是0不存在邊距，element就可以得出距離，并居中。div {position: absolute;? ? left:0;? ? right:0;? ? margin:0auto;}
使用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 時候出現(xiàn)的一個高亮
* {? ? -webkit-tap-highlight-color: rgba(0,0,0,0);}
::-webkit-scrollbar-thumb
可以修改瀏覽器的滾動條樣式。IE火狐可能不支持。
-webkit-appearance:none
To apply platform specific styling to an element that doesn't have it by default
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開啟硬件加速
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 讓元素支持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。一般設(shè)置在包裹元素的父類上。
.div-box {perspective:400px; }
css實現(xiàn)不換行、自動換行、強制換行
//不換行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以上
css3 linear-gradient 線性漸變
默認開始在top, 也可以自定義方向。
div {
linear-gradient(red, yellow)
}
background: linear-gradient(direction, color-stop1, color-stop2, ...);
常用的選擇器 :nth-child() Selector
選擇父類下第一個子節(jié)點，p元素
p:nth-child(1) {? ? ...}
-webkit-font-smoothing 字體抗鋸齒
使用該屬性能讓頁面上的字體變得清晰，但是也會造成font-weight: bold 加粗變得異常。不信你試試...
div {
-webkit-font-smoothing: antialiased;
}
更新3-31
CSS3 filter Property 圖片過濾，控制灰度
img {? ? -webkit-filter: grayscale(100%);/* Safari 6.0 - 9.0 */filter: grayscale(100%);}
移動端可以使用，IE兼容不好。
使用css創(chuàng)建三角形
這個很多面試題好像問到，但實際中我也確實使用了。
div {? ? border-bottom:10px solid white;? ? border-right:10px solid transparent;? ? border-left:10px solid transparent;? ? height:0px;? ? width:0px; }
transparent 透明
