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

• 有以下幾種表示方式

  // 直接寫顏色
  #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