昨天介紹了使用 Ionic 套件的 Components 組合出 Credit Card Checkout 頁面，今天主軸放在使用 css 將畫面調整為設計畫面的樣式。

漸層區塊
這邊設定上方漸層區塊外層為 class: header-wrap，漸層顏色為紫色至粉色，寫法如下：

.header-wrap {
    background: linear-gradient(to bottom, #9399ff 0%,#ff99ca 100%);
}

→ linear-gradient ( 方向, 顏色1, 顏色2... );

信用卡區塊
信用卡區塊須給定背景色、外光暈及原角，這邊 class 取為 credit-card，css 寫法如下：

.credit-card {
    background: rgba(255, 255, 255, 0.65);
    box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3);
    border-radius: 10px;
  }

→ box-shadow: 水平方向位移 | 垂直方向位移 | 模糊像素 | 光暈擴散像素 | 顏色;

商品圖資訊區塊
此區塊設計上以左圖右文的方式呈現，是很常見的設計排版方式，這邊設計方式如下：
item-title-wrap：商品區塊
item-img：商品圖區塊
title：商品名稱區塊

.item-title-wrap {
    height: 90px;
    margin: 20px 0 15px;
    padding: 10px 0 10px 120px;
    display: inline-block;
    position: relative;
}
.item-img {
    width: 90px;
    margin-right: 40px;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
}
.title {
    font-size: 18px;
    color: #565656;
    margin-bottom: 15px;
}

訣竅：將外層設定為 position: relative, 再將圖片設定為 position: absolute, 如此一來圖片將會以外層為父元素，對齊外層的左上方為起始位置。

下方按鈕區塊
通常一個 APP 中的按鈕都會有一定的設計規範，例如尺寸、文字大小、顏色等，故我們時常會把按鈕的 css 寫成元件的方式，以便在同一個專案中的任何地方都可以使用同一個 class 達到畫面的完整性。
這邊我們將按鈕的 class 設為 btn，給定背景色及字體顏色等，寫法如下：

.btn {
    height: 50px;
    margin: 0;  // 移除套用 ionic button component 的上下距離
    background: #dd1b8e;
  }

以上大致說明 css 寫法，若想知道更多細節，可參考我的 Github