1.css3邊框
border-radius 左上右下
box-shadow box-shadow: 水平陰影(可負值,必) 垂直陰影(可負值,必) 模糊距離 陰影尺寸 顏色顏色 inset(將外部陰影改為內部);
border-image 路徑 邊框向內偏移 邊框寬度 邊框影象區域超出邊框的量 rounded(鋪滿)/repeat(平鋪)/stretch(拉伸)
2.css3背景
background-size 規定背景的尺寸
background-origin 規定背景的定位區域(content-box、padding-box 或 border-box)
允許使用多個背景影象
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
3.css3文字效果
text-shadow 水平陰影 垂直陰影 模糊距離 陰影顏色
word-break:break-all 在超過容器寬度時，若有乙個單詞很長，則會將單詞截斷，分開寫
word-wrap:break-word 在超過容器寬度時，若有乙個單詞很長，則會將單詞放到下一行，而不對單詞進行截斷
white-space:normal(自動換行)，當寫入的文字超過定義的寬度後會自動換行，但當寫入的資料是一堆沒有空格
的字元或者字母或者數字時，超過容器的寬度時就會把容器撐大，不換行
常用(省略號用法)
單行文字實現省略號
width:100%;overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis
規定多行實現省略
display: -webkit-box;-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow:ellipsis
**webpack打包工具時，會忽視這個-webkit-box-orient屬性
這個時候需要這樣寫
/*! autoprefixer: off
*/-webkit-box-orient: vertical;
/*autoprefixer: on
*/
4.css3轉換(2d)
transform-origin:被轉換元素的位置
transform : 對元素進行移動,縮放,轉動,拉長或拉伸
translate(x,y) 沿x,y軸移動的元素
scale(x,y) 縮放大小
rotate(旋轉角度)
skew(x-angle,y-angle) 傾斜轉換(少用)
全家福:旋轉、縮放、移動以及傾斜元素
matrix()
5.css3轉換(3d) 比2d都多了乙個z(詳細看api)
6.css３過渡(可以有多項，用，號分隔就好)
需要兩項內容 效果作用於哪個屬性 時效 效果(linear，ease等)
transition:width 2s, height 2s;
css３動畫(可以參考一下animate.css)
animation:至少有 規定動畫名稱 動畫時長 (還有其他的引數可選)詳細的可以參考api
@keyframes myfirst或者to }
@keyframes myfirst25% 50% 100% }
CSS3新特性總結
1.屬性選擇器 常用的簡單歸納下 attribute value 用於選取帶有指定屬性和值的元素。title w3school attribute value 包含指定詞彙的元素。後代選擇器 title hello attribute value 用於選取帶有以指定值開頭的屬性值的元素，該值必須是整...
css3新特性總結
一 圓角邊框 border radius 5px 二 多背景圖 background url img flwr.gif right bottom no repeat,url gif left top repeat 三 顏色和透明度 由原來的rgb到現在的rgba background rgba 0,...
css3新特性總結
一 圓角邊框 border radius 5px 二 多背景圖 background url img flwr.gif right bottom no repeat,url gif left top repeat 三 顏色和透明度 由原來的rgb到現在的rgba background rgba 0,...