1.每乙個方向上的邊框形狀並不是矩形的，其實是三角形或梯形的，配合圓角邊框可以製作美麗花瓣。
2.css3 3d變換效果 transform
◆transform:rotatex(360deg);表示在x軸3d旋轉360度。
◆transform:rotatey(360deg);表示在y軸3d旋轉360度。
◆transform:rotatez(360deg);表示在z軸3d旋轉360度。
◆transform:translatex(300px);表示在x軸3d位移300px。
◆transform:translatey(300px);表示在y軸3d位移300px。
◆transform:translatez(300px);表示在z軸3d位移300px。
★3d效果一般配合透視效果來使用更加明顯，一般是給父容器新增透視。
2.css3 透視效果 （調整焦距）
◆perspective:1000px;值越大焦距越遠，值越小焦距越近，值越小效果越明顯，就會感覺和你的距離更加的近，透視效果僅僅只是視覺上的呈現。
3.css3 反面可見性
◆backface-visibility:hidden;表示背面可見性為隱藏，一般配合3d翻轉來使用，乙個盒子只有正面可見，一翻轉到背面之後就不可見了。
4.偽元素中的content屬性可以賦值為標籤的自定義屬性【
//設定偽元素
span::before
//頁面標籤
】。5.css3 真正的3d效果 transform-style:preserve-3d;當這個屬性加給父盒子時，可以讓子盒子呈現3d效果，這個屬性預設值為flat，子盒子呈現2d效果（扁平化）。
6.css3 動畫 animation
◆js中的animate函式呼叫，是先定義乙個animate函式然後再呼叫animate();
◆css3中的動畫，也是先定義然後再呼叫。
◆css3定義動畫:【
@keyframes 動畫名to}
】◆css3執行動畫：【
animation: 動畫名 一次動畫持續時間 執行次數（infinite:無限次） 是否反向（alternate） 運動曲線（linear） 延遲時間;
】◆css3動畫定義與執行【
/*定義乙個移動的動畫*/
@keyframes move to}
/*使用定義的移動的動畫*/
animation:move 2s 3;
】◆定義多組動畫【
@keyframes move
25%50%
75%100%}】
★animation屬性詳解【
/*動畫名稱 必寫*/
animation-name:move;
/*動畫一次所持續的時間 必寫*/
animation-duration:2s;
/*動畫執行的次數（動畫重複的次數） 無數次:infinite;*/
animation-iteration-cont:3;
/*動畫的方向：normal 全正向，alternate 先正向再反向*/
animation-direction:alternate;
/*動畫每次執行時延遲的時間*/
animation-delay:1s;
/*動畫結束後保持的狀態 backwards(預設值)表示回退到原點 forwards表示不回到原點，backwards表示動畫結束後 保持 動畫開始前的狀態，forwards表示動畫結束後 保持 動畫結束後狀態*/
animation-fill-mode:backwards;
/*動畫的型別 也就是動畫的運動曲線 linear 表示線性勻速 ease-in 表示慢慢變快 ease-in-out 表示先快後慢 steps(3) 表示每一次動畫都是分三步完成(速度就像是一幀一幀的完成的)，steps這個屬性可以用來做時鐘，也能夠用來做那些 很準確的一幀一幀完成的動畫，因為steps的每一幀都是瞬間完成的*/
animation-timing-fuction:linear;
animation-play-state:paused;
】◆animation:time 60s steps(60);這表示一根秒鐘一分鐘轉60次。
7.css3 多列布局 column ，可能相容性問題，需要新增私有字首 -webkit-、-moz-、-ms-、-o-
◆column-count:3;表示分三列
◆column-rule:1px dashed red;表示列與列之間的分割線。
◆column-gap:30px;表示列與列之間的間距。
◆column-width:300px;表示設定每列的寬度，但是如果預設的寬度大於你設定的寬度，則不會起任何效果，前面三條會影響預設寬度的大小，可以說預設的寬度就是由前面三項屬性count、rule、gap產生的。
★column-span:all;表示跨列，一般配合text-algin:center讓標題居中。
css3相關筆記（三）
1.每乙個方向上的邊框形狀並不是矩形的，其實是三角形或梯形的，配合圓角邊框可以製作美麗花瓣。2.css3 3d變換效果 transform transform rotatex 360deg 表示在x軸3d旋轉360度。transform rotatey 360deg 表示在y軸3d旋轉360度。tr...
css3相關筆記（四）
1.css3新增的伸縮布局，主軸方向是從左到右，側軸方向是從上到下 display flex 預設從左到右，從上到下 設定主軸排列方向的方式 flex direction row 預設屬性，表示從左至右的排列 flex direction row reverse 表示從右至左的排列 flex dir...
CSS3相關效果整理
1.過長省略 white space nowrap 為應用text overflow做準備，禁止換行 overflow hidden 為應用text overflow做準備，禁止文字溢位顯示 text overflow ellipsis 相容ie，safari webkit o text overf...