border

border常用的屬性有4個；
1、寬度：border-width
2、樣式：border-stye dotted(點) dashed(曲線) solid(實線) none(沒邊框)
3、顏色：border-color
4、圓角：border-radius

小技巧

可以用border來實現小三角型，梯形等圖案；
示例：

{
 font-size: 0;         /*瀏覽器預設有字型大小和行高*/
 line-height: 0;
 border-width: 5px;
 border-rigth-width: 0;    /*設定右邊寬度為0*/
 border-style: dashed;    /*一定不能只設計左邊border的style，否則其他預設為none，會出錯，不能達到預期效果*/
 border-left-style: solid;
 boder-color: transparent;   /*設定其他邊為透明*/
 border-left-color: #000;
}
 

可以把不同邊的寬度設定的不同，以實現不同形狀的三角行

position定位

有5種定位模式
*static：預設值，及沒有定位，不受left，right，top，bottom的影響
*relative：相對佈局（參照原位置），受left，right，top，bottom的影響
*absolute：絕對定位，經常以relative元素為父容器，不佔空間，會出現重疊；
*fixed：固定位置，不受滑動視窗滑動影響
*sticky：可設定left，right，top，bottom之一作為閾值；
達到閾值前表現為relative，達到閾值後表現為fixed；

具體效果可看菜鳥教程。
應用：做滑動選單等；

背景圖

• background-image可以同時設定多個背景圖片，寫在前面的層級較高；
  當使用背景圖時，一定要設定其size，否則圖片不顯示
• background-position ,用於確定背景圖的位置，可以為數字，正表示右（下）移；
  也可以用right top表示從圖片右上角開始顯示；

當有多個背景圖，屬性之間用'，'分隔;

• background-repeat: repeat/no-repeat/repeat-x/repeat-y；

• background-attachment設定背景影象是否固定或者隨著頁面的其餘部分滾動。

  • scroll 背景圖片隨頁面的其餘部分滾動。這是預設
  • fixed 背景影象是固定的
  • inherit 指定background-attachment的設定應該從父元素繼承

文字格式

• 設定文字顏色 color

• 設定文字對齊方式 text-align

  • center居中
  • left 居左/right 居右
  • justify 每一行被展開為寬度相等，左，右外邊距是對齊（如雜誌和報紙）

• 文字的豎直對齊方式 vertical-align作用物件不為text，是img...

  • middle 位於父元件中部
  • text-top 把元素的頂端與父元素字型的頂端對齊
  • text-bottom 把元素的底端與父元素字型的底端對齊

• 文字修飾 text-decoration

  • 可以用來加下劃線，刪除線，或去除連線的下劃線
• 指定文字第一行縮排 text-indent:50px;
• 設定行間距 line-height 可用於文字的豎直居中
• 設定單詞間距/字元間距 word-space/letter-space
• 控制文字的書寫方向 direction: rtl;

unicode-bidi 屬性與 direction 屬性一起使用，來實現文字的倒寫

• unicode-bidi 文字是否倒著寫
• white-space 常用於控制文字是否換行

css3新增屬性：
background-size：設定背景圖大小；可以設定畫素大小，也可以用百分數；

background-Origin,用於指定背景影象顯示的位置；
content-box;在內容部分顯示；
padding-box；在內邊距顯示；
margin-box；在外邊距顯示；

background-clip,用於指定背景影象開始顯示的位置；
content-box;從內容部分開始；
padding-box；從內邊距開始；
margin-box；從外邊距開始；

2D變換

*語法：transform：none | translate（）……

1. translate（x，y）方法，以x，y軸為參考進行平移操作；px
2. rotate（x）方法，在一個給定讀書順時針旋轉，可以為負值；deg
3. scale（x，y）方法，規模的變化，寬度變為x倍，高度變為y倍；
4. skew（x，y），分別表示x軸，y軸傾斜的角度；
   （類似於極座標，使用後以該座標係為標準）

上述方法均可以單獨對一個座標軸使用；（例：scale Y（））；

1. matrix（）方法。將所有的2D方法合併成一個；

3D轉換類似

css3過渡

元素從一種樣式改變為另一種樣式的效果

• transition：width 2s；要指定新增效果的屬性，指定效果持續時間
• 觸發過渡的事件，比如滑鼠移動到上面，或點選……
• Transition-delay,效果何時開始
• Transition-timing-function:過渡效果的事件曲線
  預設為ease，linear（查css文件）

css3動畫

1. 在@keyframes裡定義動畫
2. 把動畫繫結到一個選擇器，否則不會有任何效果；

@keyframes myfirst{
    from {background: red;}
    to {background: yellow;}

    //from,to和0%，100%對應。常用下面選擇器
    /* 
    0% {background: red;}
    25% {background: blue;}
    50% {background: yellow;}
    100% {background: green;} 
    */
}
div{
    animation: myfirst 5s;
}

常用屬性（其他屬性可查文件）

• animation-timing-function設定動畫的速度曲線
• animation-iteration-countd動畫的迴圈次數，預設為1，infinite為無限迴圈

css3多列

滴水穿石,不是力量大,而是功夫深