css3
1、旋轉角度：
transform:rotate(30deg);//旋轉30度
2、圓角邊框（由小到大）：
border-radius:25px;
-moz-border-radius:25px; /* old firefox */
3、邊框陰影（box-shadow）：
box-shadow: 10px 10px 5px #888888;/*寬、長、透明度、顏色*/
border-image:url(border.png) 30 30 round;
border:15px solid transparent;/*拉伸*/
5、 文字陰影（text-shadow）：
text-shadow: 5px 5px 5px #ff0000;/*水平陰影、垂直陰影、模糊距離，以及陰影的顏色*/
6、自動換行（word-wrap 會對單詞進行拆分）：
word-wrap:break-word;
7、2d 轉換：
（旋轉角度）transform:rotate(30deg);//元素順時針旋轉 30 度
（位置移動）transform: translate(50px,100px);//元素從左側移動 50 畫素，從頂端移動 100 畫素
（增縮比例）transform: scale(2,4);//寬度轉換為原始尺寸的 2 倍，把高度轉換為原始高度的 4 倍
（翻轉角度）transform: skew(30deg,20deg);//圍繞 x 軸把元素翻轉 30 度，圍繞 y 軸翻轉 20 度
（2d 轉換方法組合）transform:matrix(0.866,0.5,-0.5,0.866,0,0);//旋轉、縮放、移動以及傾斜元素
8、3d 轉換：
transform: rotatex(120deg);//元素圍繞其 x 軸以給定的度數進行旋轉
transform: rotatey(130deg);//
9、過濾效果（變換圖形）：
transition: width 1s;
transition: width 1s linear 2s;//linear 速度均勻，延遲2s開始
div:hover
10、動畫（@keyframes）：
animation:myfirst 5s;//myfirst設定動畫名
@keyframes myfirst
to }
@keyframes myfirst
25%
50%
100%
}10、同行併排顯示div盒子，均勻隔開
新建預約
預約歷史
秀髮日曆
CSS3布局樣式
css3多列布局columns 為了能在web頁面中方便實現類似報紙 雜誌那種多列排版的布局，w3c特意給css3增加了乙個多列布局模組 css multi column layout module 它主要應用在文字的多列布局方面，這種布局在報紙和雜誌上都使用了幾十年了，但要在web頁面上實現這樣的...
CSS3布局樣式
1.多列布局 columns 為了能在web頁面中方便實現類似報紙 雜誌那種多列排版的布局，w3c特意給css3增加了乙個多列布局模組 css multi column layout module 它主要應用在文字的多列布局方面。columns column width column count 引...
css3動畫樣式總結
語法格式 transition 要過渡的屬性 花費時間 運動曲線 何時開始 屬性描述 transition 簡寫屬性，用於在乙個屬性中設定四個過渡屬性。transition property 規定應用過渡的css屬性的名稱。transition duration 定義過渡效果花費的時間。預設是0。t...