CSS雜記

1、transform:translate(移動):px水平垂直\scale(縮放):數字,水平垂直\rotate(旋轉):角度(deg)  \skew(傾斜):角度 -----執行順序左到右,無優先級

2、基於上一個屬性,有了下一個屬性transform-origin:變換的基準點。已左上角爲爲原點,可以是left\top\px\%\center這些單位

3、transition:變換時的過度效果(屬性、時間、曲線、延時)

4、opacity:透明度 %。用於透明的屬性還有rgba顏色,transparent背景色

5、box-shadow和text-shadow。前者有inset\outset選項,後者沒有,多個陰影可用逗號隔開。

6、使用margin: 0 auto;居中,前提是該元素是塊級元素。如canvas元素就是行內元素,需要設置display

7、box-sizing:  border-box:爲元素指定的任何內邊距和邊框都將在已設定的的寬度和高度內進行繪製,通過從已設定的寬度和高度分別減去邊框和內邊距才能得打內容的寬度和高度。content-box: 寬度和高度分別運用到元素的內容框,在寬度和高度之外繪製元素的內邊距和邊框。

8、background:url(http://index.png) no-repeat left top/200px 70px,  url(http://index2.png) no-repeat right bottom/150px 50px; 多重背景

css小技巧:http://www.html5cn.org/article-8881-1.html

2015-10-27-->

1、border-radius :還可以這樣設置50px 50px 30px 20px / 50px 50px 30px 20px; 斜線前代表水平方向,斜線後代表垂直方向。這樣設置8      個值也等同於:50px 50px 30px 20px。

2、outline : outline和border其實長的差不多,但是本質卻不一樣,outline不屬於盒子模型,不參與文檔流的計算,和box-shadow差不多。要提      到的是它的一個屬性:outline-offset:偏移量,基於默認值,可爲負數。

3、屬性選擇器是應注意大小寫,僅有部分是不區分大小寫的,如input的type。 可以用input[type="SUBMIT"]來選擇<input type='submit'>

4、:not 、:nth-child、:nth-of-type等組合使用來解決多菜單之間的個性化,如:not(:last-child)來去掉最後一個的右邊框等。

5、使用gradient、-webkit-background-clip、-webkit-text-fill-color製作漸變文字。




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章