CSS之樣式相關

邊框相關屬性

• box-shadow (邊框陰影)
  
  • h-shadow 水平陰影距離
  • v-shadow 垂直陰影距離
  • blur 可選,模糊距離
  • spread 可選,陰影尺寸
  • color 可選,顏色
  • inset 可選,將當前陰影修改爲內陰影
  • box-shadow: h v blur spread color inset
• border-image (圖片邊框)
  
  • border-image-sourse 圖片路徑
  • border-image-width 圖片邊框的寬度
  • border-image-repeat
    
    • 取值
      
      • repeat 平鋪
      • round 鋪滿
      • stretch 拉伸
  • border-image: source width repeat
• outline (輪廓)
  
  • outline-width 輪廓寬度
  • outline-style 輪廓樣式
  • outline-color 輪廓顏色
  • outline: width style color

背景相關屬性

• background-size
  
  • width height
  • width% height%
  • cover 擴大背景圖像,使背景圖完全覆蓋背景區域,直到碰到最後一個邊緣才停止
  • contain 擴大背景圖像,碰到第一個邊緣就停止
• background-attenchment
  
  • scroll 默認,滾動定位
  • fixed 固定定位
• background-position (背景圖像顯示位置)
  
  • x% y%
  • x y (可分別取defined,也可取絕對單位)
  • Defined數值left right top bottom center
• background-clip (背景剪裁區域)
  
  • border-box 背景被剪裁到邊框,默認值(邊框的外圍)
  • padding-box 背景被剪裁到內邊距框(內邊距框的外圍)
  • content-box 背景被剪裁到內容區
• background-origin (背景圖像繪製區域)
  
  • border-box 背景從邊框開始繪製
  • padding-box 背景從內邊距開始繪製
  • content-box 背景從內容區開始繪製
• 背景合併
  
  • background: color url() repeat attachment potision;
  • background: url() repeat position;
• background漸變
  
  • 漸變分類
    
    • 線性漸變
    • 徑向漸變
    • 重複漸變
  • 注意,所有的漸變都是通過background-image設置的
    
    • 線性漸變 linear-gradient
    • 徑向漸變 radial-gradient
    • 重複線性 repeating-linear-gradient
    • 重複徑向 repeating-radial-gradient
    • background-image: linear-gradient();
  • 線性漸變
    
    • linear-gradient(angle,color1,color2,…)
      
      • angle取值
        
        • defined值 to top , to bottom , to right
        • 0deg->to top
        • 90deg->to right
        • 180deg->to bottom
      • color (漸變顏色的開始點，過渡點，結束點)
        
        • red 0% 從開始處顯示紅色
        • greed 50% 從50%處顯示綠色
        • blue 100% 從100%處顯示藍色
  • 徑向漸變 (默認形狀爲橢圓形)
    
    • radial-gradient([size at position],color1,color2,…)
      
      • size at position
        
        • size 放射的圓形的半徑
        • position 原點所在的座標
          
          • left
          • right
          • top
          • bottom
          • center
        • 示例代碼
          
          • background-image: radial-gradient(50px 150px at 200px 150px,red,green);
  • 重複漸變
    
    • 含義: 非重複漸變下,當終止色不在100%邊緣時(如60%),此時60%到100%將由終止色填充；在重複漸變下,當終止色不在100%邊緣時,會在終止色繪製完畢後重新從起始色繪製

字體相關屬性

• font-varient
  
  • small-caps 英文字母轉換爲小型大寫字母
• font-style
  
  • italic 中英文皆轉換爲斜體

文本相關屬性

• text-decoration
  
  • none 無樣式
  • underline 下劃線
  • overline 上劃線
  • line-through 刪除線
• text-indent 首行縮進
  
  • value 具體值,指縮進的距離
• text-shadow
  
  • text-shadow: h-shadow v-shadow blur color;
  • 提示: 前三值均爲具體值,如2px
• text-overflow (該屬性必須與overflow:hidden聯用)
  
  • clip 裁剪
  • ellipsis 通過…來表示未顯示的內容 （此時需要設置white-space: nowrap;）

轉換相關屬性

• 什麼是轉換
  
  • 轉換即改變元素的一些狀態、大小、位置、形狀
  • 可以是2d轉換, 也可以是3d轉換
  • 2d, 使元素在x軸和y軸上發生變化
  • 3d, 2d基礎上增加了z軸的變化
• 轉換屬性
  
  • transform:none(默認)/transform-function;
  • transform-function 要實現轉換的函數
    
    • translate() 位移
    • scale() 縮放
    • rotate() 旋轉
    • skew() 傾斜(此函數w3school譯爲翻轉, 我認爲不準確)
    • matrix() 矩陣函數, 可實現多種效果
• 轉換原點 (這裏w3school譯文也不準確)
  
  • 即轉換的過程中圍繞的中心點, 默認情況下, 原點是整個元素的中心處
  • 更改轉換原點
    
    • transform-origin
      
      • 取值: 以元素左上方(0,0)爲中心點, 計算其他點
        
        • 數值
        • 百分比
        • 關鍵字: left/right/top/bottom/center
      • 賦值:
        
        • 一個值: x軸的移動
        • 兩個值: x軸和y軸
        • 三個值: x, y, z軸
• translate() 2d位移
  
  • translate(x,y)
  • translate(value) value同時指代x, y
    
    • 取值
      
      • 數值
      • 百分比
        *單向位移
    • translateX(x)
    • translateY(y)
• scale() 2d縮放
  
  • scale(value) value同時指代x, y
  • scale(x,y)
    
    • 取值
      
      • 默認值 1
      • 0以上數字
  • scaleX(x)
  • scaleY(y)
• rotate() 2d旋轉
  
  • rotate(deg)
    
    • deg爲角度0-360
    • 默認爲順時針旋轉
    • 負值時爲逆時針旋轉
• skew() 2d傾斜
  
  • 該傾斜實際上爲是元素髮生2d形變
  • skew(deg,deg)
    
    • 第一個deg爲橫軸不動, 數軸發生一定角度的傾斜(結果高度不變,寬度變化)
    • 第二個deg爲豎軸不動, 橫軸發生一定角度的傾斜(結果寬度不變,高度變化)
  • skewX(x)
  • skewY(y)
• matrix() 矩陣變化
  
  • 矩陣變化有6個參數, 暫命名爲(a,b,c,d,e,f),允許進行旋轉、縮放、移動、傾斜
  • 前兩值以矩形框左邊爲軸,中兩值以矩形框上邊爲軸, e爲左右位移值, f爲上下位移值(位移值單位爲px)
  • a爲橫向縮放, 默認值爲1, 0-1時爲縮小, >1時爲放大, 負值時以左邊爲軸發生翻轉, 縮放效果同正值
  • b爲縱向傾斜, 默認值爲0, 值可正可負
  • c爲橫向傾斜, 默認值爲0, 值可正可負
  • d爲縱向縮放, 默認值爲1, 0-1時爲縮小, >1時爲放大, 負值時以上邊爲軸發生翻轉, 縮放效果同正值
• 3d轉換
  
  • 屬性:
    
    • perspective: 設置人眼到投影平面的距離(隻影響3d元素,不影響2d元素)
    • 設置位置: 加在父元素上, 完成後其子元素就可以完成3d轉換
  • 3d旋轉
    
    • 屬性: transform
    • 函數:
      
      • rotateX(deg)
      • rotateY(deg)
      • rotateZ(deg)
      • rotate3d(x,y,z,deg)
        
        • x,y,z的取值爲1, 0, -1
        • rotate3d(-1,0,1,45deg)