transform
translate()
rotate()
scale()
skew()
matrix()
值 rotate(30deg) 把元素順時針旋轉 30 度。
值 translate(50px,100px) 把元素從左側移動 50 畫素,從頂端移動 100 畫素。
值 scale(2,4) 把寬度轉換為原始尺寸的 2 倍,把高度轉換為原始高度的 4 倍。
值 skew(30deg,20deg) 圍繞 x 軸把元素翻轉 30 度,圍繞 y 軸翻轉 20 度。
matrix() 方法需要六個引數,包含數學函式,允許您:旋轉、縮放、移動以及傾斜元素。
通過 rotatex() 方法,元素圍繞其 x 軸以給定的度數進行旋轉。
180度的效果
通過 rotatey() 方法,元素圍繞其 y 軸以給定的度數進行旋轉。
180度的效果
從紅到黃到藍最後變綠
@keyframes myfirst
25%
50%
100%
}
column-count屬性指定元素的列數
olumn-gap屬性指定的列之間的差距
column-rule屬性設定列之間的寬度,樣式和顏色
當寬度為0時可以設定邊框實現繪製圖形
可以將其他邊框設定為透明實現三角形
甚至可以省略下邊框
梯形
width: 200px;
HTML(XHTML)基礎知識(七) CSS
在 html 文件中引入 css 的方式 使用 標籤 在css 中的度量單位 css中的度量單位 單位說明 百分比 cm厘公尺 em字型寬度 ex字母 x 的字型高度 in英吋 mm公釐 pc12pt pt1 72 英吋 px畫素 css 中的顏色表示 css 中的顏色表示 表示方式 說明顏色名 特...
CSS 基礎知識
選擇器 元素選擇器 p 後代選擇器 li a id選擇器 intro some text 類選擇器 dateposted 24 3 2006 偽類選擇器 a link 通用選擇器 浮動 定位 框模型 定位的四種模型 相對定位 relative 相對定位的座標原點 該元素在普通流中的位置 特別點 元素...
CSS基礎知識
css規則有兩個主要的部分組成 選擇器,以及一條或者多條宣告h1 css內部的注釋以 開始,以 結束p id選擇器,通過 來選擇html元素 username class選擇器,通過 來選擇一組class元素.center 指定特定的html元素使用classp center 引入外部樣式表 rel...