css有些屬性容易忘記，半天不寫就要去查api，有時候api還不好使，于是還是記下來以后方便用，后續(xù)會慢慢補(bǔ)充進(jìn)來的。
outline移除當(dāng)選中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
手機(jī)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 */}
清除手機(jī)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
移除瀏覽器默認(rèn)的樣式，比如chrome的input默認(rèn)樣式，然后就可以定義需要的樣式。
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)不換行、自動換行、強(qiáng)制換行
//不換行white-space:nowrap;//自動換行word-wrap:break-word; word-break: normal;//強(qiáng)制換行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 線性漸變
默認(rèn)開始在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 透明
