之前也有寫過 CSS 優惠券樣式《CSS3徑向漸變實現優惠券波浪造型》，這次再來溫習一遍，并且將更為詳細的講解，從布局到具體樣式說明，最后定義 CSS 變量，自定義主題顏色。

布局

布局 其實是學習前端的重要部分，最常用的方式就是從上而下、從左而右、亦或者兩個相結合。

看上圖，而這里，我們就只是最簡單的布局方式，從上而下：

1、優惠券金額和過期時間

2、優惠券描述

3、按鈕（其實按鈕也可以放到“2”里面去）

這樣分析，我們就有了 html 架構了

<div class="coupon">
  <!-- 1、優惠券金額和過期時間 -->
  <div class="price">
    100元
    <span>優惠券</span>
    <p class="timeout">2020-12-31 18:18:18過期</p>
  </div>

  <!-- 2、優惠券描述 -->
  <div class="describe">
    <p>1、商城、美食可用</p>
    <p>2、過期作廢</p>
  </div>

  <!-- 3、按鈕 -->
  <div class="btns">
    <button>立即使用</button>
  </div>
</div>

CSS修飾

接下來我們用 CSS 美化我們的 html 。同理，我們也根據布局分步進行樣式書寫。

1、優惠券金額和過期時間樣式

這里的核心就是上方的凹槽和下方的鋸齒

.coupon{
  background-color: #E0E0E0;
  width: 200px;
  /* css變量 */
  --main-color: #EC407A;
  --f-color: #444;
}
.price {
  position: relative;
  height: 120px;
  background-image: radial-gradient(
      circle at 100px -8px, #fff 20px, var(--main-color) 21px
  );
  color: #fff;
  font-size: 20px;
  text-align: center;
  padding-top: 40px;
}
.price .timeout{
  color: var(--f-color);
  font-size: 14px;
  margin-top: 25px;
}
.price span{
  font-size: 14px;
}

這里用到了 徑向漸變，不清楚用法的小伙伴可以看看語法：

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

注釋：

（1）、shape 確定圓的類型:

ellipse (默認): 指定橢圓形的徑向漸變。

circle ：指定圓形的徑向漸變

（2）、size 定義漸變的大小，可能值：

farthest-corner (默認) : 指定徑向漸變的半徑長度為從圓心到離圓心最遠的角

closest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊

closest-corner ： 指定徑向漸變的半徑長度為從圓心到離圓心最近的角

farthest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊

（3）、position 定義漸變的位置。可能值：

center（默認）：設置中間為徑向漸變圓心的縱坐標值。

top：設置頂部為徑向漸變圓心的縱坐標值。

bottom：設置底部為徑向漸變圓心的縱坐標值。

（4）、start-color, ..., last-color 用于指定漸變的起止顏色。

這樣價格上方的凹槽就有了，接下來下方的鋸齒我們也可以用 徑向漸變 的方式實現：

.price::after{
  position: absolute;
  content: '';
  display: block;
  bottom: 0px;
  height: 10px;
  width: 100%;
  /* background-size: 11px 200px; */
  background-image: 
    radial-gradient(
    circle at 5px 10px, 
    #E0E0E0 6px, 
    var(--main-color) 7px);
}

偽類元素 ::after 設置徑向漸變背景為一個圓，后進行平鋪就形成了鋸齒，調整位置。

其實還有更簡單的方法，可以直接用一個虛線邊框即可搞定，請看：

.price::after{
  position: absolute;
  content: '';
  display: block;
  bottom: -5px;
  width: 100%;
  border-bottom: 10px dotted #E0E0E0;
}

當然也有缺陷，間隔位置不好控制

2、優惠券描述與按鈕 優惠券核心鋸齒已經搞定了，下面都是小菜啦，非常簡單咯

.describe{
  color: #333;
  padding: 10px;
  font-size: 14px;
}
.btns {
  /* 使其button可以居中 */
  text-align: center;
}
.btns button{
  /* 重置按鈕樣式 */
  border: none;
  box-shadow: none;
  outline: none;

  background-color: var(--main-color);
  color: #fff;
  width: 50%;
  border-radius: 20px;
  line-height: 30px;
  margin: 40px 0 20px;
  cursor: pointer;
}

主題顏色

大家都看到了，我們上方代碼主要顏色都采用的變量，而且變量是定義在 .coupon 類選擇器里面的。這樣的原因是：

1、CSS變量作用域（CSS變量只能作用于自身以及后代元素。兄弟元素，祖先元素都不能享用。）

2、方便主題使用

ok，我們就可以copy 多個 優惠券，并給每個添加一個不同的 class，比如下方的 theme1、theme2、theme3

<div class="coupon theme1">
  ...
</div>
<div class="coupon theme2">
  ...
</div>
<div class="coupon theme3">
  ...
</div>
<div class="coupon">
  ...
</div>

接下來我們就為不同主題定義不同的顏色變量

.coupon.theme1{
  --main-color: #8E24AA;
  --f-color: #fff;
}

.coupon.theme2{
  --main-color: #039BE5;
  --f-color: #fff;
}

.coupon.theme3{
  --main-color: #26A69A;
  --f-color: #fff;
}

這樣，theme1主題下的優惠券，就是紫色主題，theme2主題下的優惠券，就是藍色主題...，而默認主題顏色就是我們 .coupon 類選擇器里面的定義的變量顏色（紅色）。

小結

今天你學到了嗎？從布局分析到具體實現，再到主題顏色，相信小伙伴們都各有所得。

armonyOS實戰

HarmonyOS卡片樣式設計

從鴻蒙手機的左下角屏幕向上滑動，就能打開我們的卡片服務。在這里可以直接找到多樣化的卡片類應用操作。如下圖所示：

如上圖所示的今日視頻推薦，這是前面博主開發的簡單的視頻類小卡片應用。那么這個圖標是如何生成，又怎么由開發中定義呢？

今天，博主就來教大家如何玩轉卡片。

卡片的布局文件

首先，我們要明白創建的項目哪個文件卡片布局。

如上圖所示，這里展開的widget與resource文件夾都是純卡片應用，卡片布局的一部分。如這里的index.hml文件所示：

可以看到，這里就是1張圖片與2個文本。其中圖片為下圖的背景，而2個文本，一個是標題（今日文本推薦），一個是描述（還記得三年之約...）。

不過，這只是卡片應用的縮略圖，點擊之后，會展開如下圖所示的詳細操作卡片步驟。

這里有2個文本內容，（本人專屬的小視頻應用）文本以及（...的專屬視頻）文本。

...的專屬視頻文本：在resources-base-element-string.json中進行配置。

本人專屬的小視頻應用：在config.json的配置文件中修改。如下圖所示：

當然，這里開發中可以自行配置中英文對照，博主為了偷懶省略了英文修改，還請見諒?？ㄆ季值囊恍┡渲眉拔募薷模@里基本講解完成。下面，我們來自定義卡片的布局。

自定義2*4的卡片布局

可以看到上面截圖的配置文件config.json中，有一個2*2的supportDimensions，顧名思義就是這個卡片占據2行2列圖標位置，這里可以配置多個。

現在我們需要將其變為2行4列如何做到呢？

其實很簡單，再創建一個即可。在entry文件夾點擊右鍵New-Service Widget，然后選擇2*4的默認樣式，點擊創建即可。

創建成功之后，我們的項目下會多一個widget1的文件夾，這個就是2*4樣式的代碼文件。我們只需要在這里操作即可。

運行之后，效果如下：

當然，這里的樣式同樣是一個類html文件布局，你只要更改上面的內容，這里的內容自然會變更，至于組件的應用后面實戰有詳細講解。

桌面樣式如下（這是2*4的，你也可以添加2*2的）：