[第六週] CSS Part2 - 裝飾起來吧


  • Background  背景
    • 有以下幾種表示方式
      // 直接寫顏色
      #box1 {
      background: red;  
      }
      // 十六進制色碼表
      #box2 {
      background: #77FFEE;  
      }
      // rgb
      #box3 {
      background:rgb(200, 100, 50);
      }
      // a 是透明度
      #box3 {
      background:rgba(200, 100, 50, 20);
      }
      // 加入背景圖片
      #box1 {
      background: url(./sheep.jpeg);    
      height:720px;
      }
      
    • 圖片大小
      //直接定義大小
      background-size: 100px 100px
      background-size: 50% 50%
      // 將背景圖片縮小至可以在div內呈現,不會壓縮到比例
      background-size: contain
      // 使用於背景圖片小於容器時,將背景圖片的大小放大至容器的大小並填滿,缺點是如果容器的長寬比例與背景圖片的長寬比例不吻合,會出現背景圖片失真的情況。
      background-size: cover
      
  • border & outline 邊框

    // 框線的大小 樣式 顏色
    border: 2px solid blue;
    // 圓角
    border-radius:10px;
    
    outline: 5px solid yellow;
    

    差別: border 是往裡面長,會影響到元素的大小; outline是往外長,元素大小不會影響到。實際開發時幾乎都是用到 border。

    • 用 border 畫圖
      // 圓形
      border-radius:50px;
      border-radius:10%;  
      // 三角形, 
      #box1 {
      background: transparent;
      width: 0px;
      height: 0px;
      border-top: 100px solid transparent;
      border-bottom: 100px solid #ff00ff;
      border-left: 100px solid transparent;
      border-right: 100px solid transparent;
      }
      
  • margin & padding 邊距

    // 第一個參數是上下,第二個參數是左右
    padding: 10px 30px
    margin: 10px 20px
    

    差別如下圖,margin是調整border外的邊界;padding則是調整border內到內文之間的距離。

    圖片來源:https://www.w3schools.com/css/css_boxmodel.asp

  • transition 過渡效果

    // 包含四種屬性,property duration timing-function delay
    transition all 1s ease-in
    
#border #outline #margin #padding #transition






Related Posts

新手學 Command line 與 Git 的基本指令

新手學 Command line 與 Git 的基本指令

Day01 監聽“可見狀態”事件 - Intersection Observer API

Day01 監聽“可見狀態”事件 - Intersection Observer API

【Day04】實戰開始 - 設計版型以及透過Vue框架建立專案

【Day04】實戰開始 - 設計版型以及透過Vue框架建立專案



Comments