搜尋

純 CSS 碼表 ( 可計時 )

這篇教學會使用非常多的 CSS 進階技巧，包含 CSS 變數、動畫控制、結構選擇器、虛擬類別選擇器、自訂屬性、清單計數器...等，透過這些技巧的互相搭配組合，就能在不使用 JavaScript 的情況下，透過純 CSS 製作出可以計時的碼表。

快速導覽：

CSS 教學 - 純 CSS 碼表 ( 可計時 )

製作可以暫停和繼續的數字

使用「純 CSS」製作「可以暫停和繼續」的數字需要用到許多進階技巧，暫停和繼續的控制方式是依靠「CSS 變數」和「動畫暫停與繼續」，數字紀錄的方式依靠「自訂屬性」和「計數器」，最後透過虛擬元素顯示數值，詳細說明可參考下方範例程式碼註解。

參考：CSS 變數、CSS 動畫 animation、counter-set 設定清單數值、CSS @property 自訂屬性值、虛擬元素選擇器

線上展示：https://codepen.io/oxxo/pen/QwWPQwg

<!-- HTML 程式碼 -->
<div id="stopwatch">
  <span class="ms"></span>
</div>

<!-- CSS 程式碼 -->
<style>
  /* 自訂屬性 */
  @property --ms {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
  }
  #stopwatch {
    --state: paused;            /* 自訂變數 --state 預設值 paused */
    font-size: 100px;
  }

  #stopwatch:hover {
    --state: running;           /* hover 時改變變數 --state 為 running */
  }
  .ms {
    counter-reset: count-ms  var(--ms);  /* 設定計數器名稱 count-ms，數值為 --ms 數值 */
    animation:  oxxo-ms 1s steps(10) var(--state) infinite; /* 使用 steps 方式播放動畫 */
  }
  .ms::before {
    content: counter(count-ms); /* 虛擬元素顯示 count-ms 計數器數值 */
  }
  @-webkit-keyframes oxxo-ms {
    to {
      --ms: 10;                 /* 動畫結束點為數值為 10 的自訂屬性 --ms  */
    }
  }
</style>

CSS 教學 - 純 CSS 碼表 ( 可計時 ) - 製作可以暫停和繼續的數字

延伸上述程式碼，將其改成使用 input 的 checkbox 元素，並將負責暫停和繼續的變數移動到 checked 狀態的選擇器裡，就能做到點擊開始，再點一下就暫停的效果。

參考：「表單輸入」虛擬類別選擇器、兄弟選擇器 ( ~ )

線上展示：https://codepen.io/oxxo/pen/dPyLdPB

<!-- HTML 程式碼 -->
<div id="stopwatch">
  <input type="checkbox" id="pause">  
  <label for="pause">點我</label>
  <br>
  <span class="ms"></span>
</div>

<!-- CSS 程式碼 -->
<style>
  /* 自訂屬性 */
  @property --ms {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
  }
  #stopwatch {
    --state: paused;
    font-size: 50px;
    margin: 30px;
  }
  .ms {
    counter-reset: count-ms  var(--ms); 
    animation:  oxxo-ms 1s steps(10) var(--state) infinite;
  }
  .ms::before {
    content: counter(count-ms); 
  }
  @-webkit-keyframes oxxo-ms {
    to {
      --ms: 10;
    }
  }

  input {
    display:none;     /* 隱藏 checkbox，使用 label + for 連動 checkbox */
  }
  input:checked ~ * {
    --state: running; /* checked 狀態時啟動動畫 */
  }
  label {
    cursor: pointer;
  }
  label::after {
    content: " ( 暫停 )"
  }
  input:checked ~ label::after {
    content: " ( 繼續 )"
  }
</style>

CSS 教學 - 純 CSS 碼表 ( 可計時 ) - 點擊後可以暫停和繼續的數字

加入分鐘數、秒數和毫秒數

延伸上述程式碼，將其改成使用 input 的 checkbox 元素，並將負責暫停和繼續的變數移動到 checked 狀態的選擇器裡，就能做到點擊開始，再點一下就暫停的效果。

參考：「表單輸入」虛擬類別選擇器、兄弟選擇器 ( ~ )

線上展示：https://codepen.io/oxxo/pen/jEORZPL

<!-- HTML 程式碼 -->
<div id="stopwatch">
  <input type="checkbox" id="pause">  
  <label for="pause">點我</label>
  <br>
  <span class="num m10"></span><span class="num m"></span>:<span class="num s10"></span><span class="num s"></span>:<span class="num ms10"></span><span class="num ms"></span>
</div>

<!-- CSS 程式碼 -->
<style>
  /* 自訂屬性，分鐘十位數 */
  @property --m10 {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
  }
  /* 自訂屬性，分鐘個位數 */
  @property --m {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
  }
  /* 自訂屬性，秒數十位數 */
  @property --s10 {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
  }
  /* 自訂屬性，秒數個位數 */
  @property --s {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
  }
  /* 自訂屬性，豪秒數十位數 */
  @property --ms10 {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
  }
  /* 自訂屬性，豪秒數個位數 */
  @property --ms {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
  }
  #stopwatch {
    --state: paused;
    font-size: 50px;
    margin: 30px;
    font-family: monospace; /* 等寬字體 */
  }
  /* 把動畫樣式集中到一個類別中，透過變數就能產生不同的動畫效果
    --a-name 變數表示動畫名稱，--a-time 變數表示動畫時間，--a-steps 變數表示動畫步驟 */
  .num {
    animation: var(--a-name) var(--a-time) steps(var(--a-steps)) var(--state) infinite;
  }
  /* 分鐘數十位數 */
  .m10 {
    counter-reset: count-m10  var(--m10); 
    --a-name: oxxo-m10;
    --a-time: 3600s;    /* 動畫持續時間為 3600 秒 */
    --a-steps: 6;       /* 分成六個步驟，也就是一個步驟 600 秒 = 10 分鐘 */
  }
  .m10::before {content: counter(count-m10);}
  @-webkit-keyframes oxxo-m10 {
    to {--m10: 6;}
  }
  /* 分鐘數個位數 */
  .m {
    counter-reset: count-m  var(--m); 
    --a-name: oxxo-m;
    --a-time: 600s;    /* 動畫持續時間為 600 秒 */
    --a-steps: 10;     /* 分成十個步驟，也就是一個步驟 60 秒 = 1 分鐘 */
  }
  .m::before {content: counter(count-m); }
  @-webkit-keyframes oxxo-m {
    to {--m: 10;}
  }
  /* 秒數十位數 */
  .s10 {
    counter-reset: count-s10  var(--s10); 
    --a-name: oxxo-s10;
    --a-time: 60s;    /* 動畫持續時間為 60 秒 */
    --a-steps: 6;     /* 分成六個步驟，也就是一個步驟 10 秒 */
  }
  .s10::before {content: counter(count-s10);}
  @-webkit-keyframes oxxo-s10 {
    to {--s10: 6;}
  }
  /* 秒數個位數 */
  .s {
    counter-reset: count-s  var(--s); 
    --a-name: oxxo-s;
    --a-time: 10s;    /* 動畫持續時間為 10 秒 */
    --a-steps: 10;    /* 分成十個步驟，也就是一個步驟 1 秒 */
  }
  .s::before {content: counter(count-s);}
  @-webkit-keyframes oxxo-s {
    to {--s: 10;}
  }
  /* 豪秒數十位數 */
  .ms10 {
    counter-reset: count-ms10  var(--ms10); 
    --a-name: oxxo-ms10;
    --a-time: 1s;    /* 動畫持續時間為 1 秒 */
    --a-steps: 10;   /* 分成十個步驟，也就是一個步驟 0.1 秒 */
  }
  .ms10::before {content: counter(count-ms10);}
  @-webkit-keyframes oxxo-ms10 {
    to {--ms10: 10;}
  }
  /* 豪秒數個位數 */
  .ms {
    counter-reset: count-ms  var(--ms); 
    --a-name: oxxo-ms;
    --a-time: 0.1s;  /* 動畫持續時間為 0.1 秒 */
    --a-steps: 10;   /* 分成十個步驟，也就是一個步驟 0.01 秒 */
  }
  .ms::before {content: counter(count-ms); }
  @-webkit-keyframes oxxo-ms {
    to {--ms: 10;}
  }

  input {
    display:none;     /* 隱藏 checkbox，使用 label + for 連動 checkbox */
  }
  input:checked ~ * {
    --state: running; /* checked 狀態時啟動動畫 */
  }
  label {
    cursor: pointer;
  }
  label::after {
    content: " ( 暫停 )"
  }
  input:checked ~ label::after {
    content: " ( 繼續 )"
  }
</style>

CSS 教學 - 純 CSS 碼表 ( 可計時 ) - 加入分鐘數、秒數和毫秒數

加入重新啟動機制

如果要單純使用 CSS 產生重新啟動的機制，必須要稍微修改 HTML 程式碼，修改重點如下：

  • 使用 form 元素包覆 button 和 checkbox 元素。
  • 透過 button 的 reset 類型重置 checkbox 的狀態。
  • 新增負責「開始」的 checkbox。
  • 修改原本「暫停/繼續」的 checkbox，和開始的 checkbox 互相搭配。
  • 按下重置 button 時，停止 CSS 動畫。
  • 按下開始 checkbox 時，啟動 CSS 動畫。
  • 按下暫停 checkbox 時，暫停 CSS 動畫。

下方範例除了按照上述重點修改程式碼，也額外讓開始與暫停 checkbox「只顯示其中一種」，如此就能透過 active 和 ckecked 的虛擬類別，判斷目前按鈕狀態，進而決定動畫的播放狀態。

線上展示：https://codepen.io/oxxo/pen/azbxqOP

<!-- HTML 程式碼 -->
<form id="stopwatch">
  <button id="reset" type="reset">點我就會重置</button>
  <br>
  <input type="checkbox" id="start">  
  <label for="start" class="start">點我 ( 開始 )</label>
  <input type="checkbox" id="pause">  
  <label for="pause" class="pause">點我</label>
  <br>
  <span class="num m10"></span><span class="num m"></span>:<span class="num s10"></span><span class="num s"></span>:<span class="num ms10"></span><span class="num ms"></span>
</form>

<!-- CSS 程式碼 -->
<style>
  /* 自訂屬性，分鐘十位數 */
  @property --m10 {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
  }
  /* 自訂屬性，分鐘個位數 */
  @property --m {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
  }
  /* 自訂屬性，秒數十位數 */
  @property --s10 {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
  }
  /* 自訂屬性，秒數個位數 */
  @property --s {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
  }
  /* 自訂屬性，豪秒數十位數 */
  @property --ms10 {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
  }
  /* 自訂屬性，豪秒數個位數 */
  @property --ms {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
  }
  #stopwatch {
    --state: paused;
    font-size: 50px;
    margin: 30px;
    font-family: monospace; /* 等寬字體 */
  }
  /* 把動畫樣式集中到一個類別中，透過變數就能產生不同的動畫效果
    透過虛擬類別判斷按下開始按 checkbox 時，才會進行動畫，否則動畫會停止
    --a-name 變數表示動畫名稱，--a-time 變數表示動畫時間，--a-steps 變數表示動畫步驟 */
  #start:checked ~ .num {
    animation: var(--a-name) var(--a-time) steps(var(--a-steps)) var(--state) infinite;
  }
  /* 分鐘數十位數 */
  .m10 {
    counter-reset: count-m10  var(--m10); 
    --a-name: oxxo-m10;
    --a-time: 3600s;    /* 動畫持續時間為 3600 秒 */
    --a-steps: 6;       /* 分成六個步驟，也就是一個步驟 600 秒 = 10 分鐘 */
  }
  .m10::before {content: counter(count-m10);}
  @-webkit-keyframes oxxo-m10 {
    to {--m10: 6;}
  }
  /* 分鐘數個位數 */
  .m {
    counter-reset: count-m  var(--m); 
    --a-name: oxxo-m;
    --a-time: 600s;    /* 動畫持續時間為 600 秒 */
    --a-steps: 10;     /* 分成十個步驟，也就是一個步驟 60 秒 = 1 分鐘 */
  }
  .m::before {content: counter(count-m); }
  @-webkit-keyframes oxxo-m {
    to {--m: 10;}
  }
  /* 秒數十位數 */
  .s10 {
    counter-reset: count-s10  var(--s10); 
    --a-name: oxxo-s10;
    --a-time: 60s;    /* 動畫持續時間為 60 秒 */
    --a-steps: 6;     /* 分成六個步驟，也就是一個步驟 10 秒 */
  }
  .s10::before {content: counter(count-s10);}
  @-webkit-keyframes oxxo-s10 {
    to {--s10: 6;}
  }
  /* 秒數個位數 */
  .s {
    counter-reset: count-s  var(--s); 
    --a-name: oxxo-s;
    --a-time: 10s;    /* 動畫持續時間為 10 秒 */
    --a-steps: 10;    /* 分成十個步驟，也就是一個步驟 1 秒 */
  }
  .s::before {content: counter(count-s);}
  @-webkit-keyframes oxxo-s {
    to {--s: 10;}
  }
  /* 豪秒數十位數 */
  .ms10 {
    counter-reset: count-ms10  var(--ms10); 
    --a-name: oxxo-ms10;
    --a-time: 1s;    /* 動畫持續時間為 1 秒 */
    --a-steps: 10;   /* 分成十個步驟，也就是一個步驟 0.1 秒 */
  }
  .ms10::before {content: counter(count-ms10);}
  @-webkit-keyframes oxxo-ms10 {
    to {--ms10: 10;}
  }
  /* 豪秒數個位數 */
  .ms {
    counter-reset: count-ms  var(--ms); 
    --a-name: oxxo-ms;
    --a-time: 0.1s;  /* 動畫持續時間為 0.1 秒 */
    --a-steps: 10;   /* 分成十個步驟，也就是一個步驟 0.01 秒 */
  }
  .ms::before {content: counter(count-ms); }
  @-webkit-keyframes oxxo-ms {
    to {--ms: 10;}
  }

  input {display:none;}
  label {cursor: pointer;}
  #start:checked ~ .start {
    display: none;          /* 點擊開始 label ( 勾選 start 之後 ) 隱藏 start 的 label */
  }
  #start:checked ~ * {
    --state: running;       /* 點擊開始 label ( 勾選 start 之後 ) 播放動畫 */
  }
  .pause {display: none;}   /* 暫停的 label 預設隱藏 */
  #start:checked ~ .pause {
    display: inline;        /* 點擊開始 label ( 勾選 start 之後 )，顯示暫停 label */ 
  }
  #start:checked ~ .pause::after  {
    content: " ( 暫停 )";    /* 點擊開始 label ( 勾選 start 之後 )，讓暫停 label 顯示狀態 */ 
  }
  #start:checked ~ #pause:checked ~ * {
    --state: paused;        /* 點擊開始 label ( 勾選 start 之後 ) 同時點擊暫停 labe ( 勾選 pause )，讓動畫暫停 */ 
  }
  #start:checked ~ #pause:checked ~ .pause::after {
    content: " ( 繼續 )"     /* 點擊開始 label ( 勾選 start 之後 ) 同時點擊暫停 labe ( 勾選 pause )，，讓暫停 label 顯示狀態 */ 
  }
</style>

CSS 教學 - 純 CSS 碼表 ( 可計時 ) - 加入重新啟動機制

美化程式碼以及碼表樣式

稍微修改範例程式碼，將原本單調的畫面，改成類似碼表的畫面，就會更有碼表計時的氛圍，修改時使用了虛擬類別和絕對定位等相關技巧，詳細說明可以參考範例註解。

參考：「使用者操作行為」虛擬類別選擇器、定位 position

線上展示：https://codepen.io/oxxo/pen/YPzMeyz

<!-- HTML 程式碼 -->
<form id="stopwatch">
  <div class="circle"></div>
  <button id="reset" type="reset"></button>
  <br>
  <input type="checkbox" id="start">  
  <label for="start" class="start"></label>
  <input type="checkbox" id="pause">  
  <label for="pause" class="pause"></label>
  <div class="result">
    <span class="num m10"></span><span class="num m"></span>:<span class="num s10"></span><span class="num s"></span>:<span class="num ms10"></span><span class="num ms"></span>
    <h5>oxxo.studio</h5>
  </div>
</form>

<!-- CSS 程式碼 -->
<style>
  /* 自訂屬性，分鐘十位數 */
  @property --m10 {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
  }
  /* 自訂屬性，分鐘個位數 */
  @property --m {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
  }
  /* 自訂屬性，秒數十位數 */
  @property --s10 {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
  }
  /* 自訂屬性，秒數個位數 */
  @property --s {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
  }
  /* 自訂屬性，豪秒數十位數 */
  @property --ms10 {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
  }
  /* 自訂屬性，豪秒數個位數 */
  @property --ms {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
  }
  #stopwatch {
    --state: paused;
    font-family: monospace; /* 等寬字體 */
  }
  /* 把動畫樣式集中到一個類別中，透過變數就能產生不同的動畫效果
    透過虛擬類別判斷按下開始按 checkbox 時，才會進行動畫，否則動畫會停止
    --a-name 變數表示動畫名稱，--a-time 變數表示動畫時間，--a-steps 變數表示動畫步驟 */
  #start:checked ~ .result .num {
    animation: var(--a-name) var(--a-time) steps(var(--a-steps)) var(--state) infinite;
  }
  /* 分鐘數十位數 */
  .m10 {
    counter-reset: count-m10  var(--m10); 
    --a-name: oxxo-m10;
    --a-time: 3600s;    /* 動畫持續時間為 3600 秒 */
    --a-steps: 6;       /* 分成六個步驟，也就是一個步驟 600 秒 = 10 分鐘 */
  }
  .m10::before {content: counter(count-m10);}
  @-webkit-keyframes oxxo-m10 {
    to {--m10: 6;}
  }
  /* 分鐘數個位數 */
  .m {
    counter-reset: count-m  var(--m); 
    --a-name: oxxo-m;
    --a-time: 600s;    /* 動畫持續時間為 600 秒 */
    --a-steps: 10;     /* 分成十個步驟，也就是一個步驟 60 秒 = 1 分鐘 */
  }
  .m::before {content: counter(count-m); }
  @-webkit-keyframes oxxo-m {
    to {--m: 10;}
  }
  /* 秒數十位數 */
  .s10 {
    counter-reset: count-s10  var(--s10); 
    --a-name: oxxo-s10;
    --a-time: 60s;    /* 動畫持續時間為 60 秒 */
    --a-steps: 6;     /* 分成六個步驟，也就是一個步驟 10 秒 */
  }
  .s10::before {content: counter(count-s10);}
  @-webkit-keyframes oxxo-s10 {
    to {--s10: 6;}
  }
  /* 秒數個位數 */
  .s {
    counter-reset: count-s  var(--s); 
    --a-name: oxxo-s;
    --a-time: 10s;    /* 動畫持續時間為 10 秒 */
    --a-steps: 10;    /* 分成十個步驟，也就是一個步驟 1 秒 */
  }
  .s::before {content: counter(count-s);}
  @-webkit-keyframes oxxo-s {
    to {--s: 10;}
  }
  /* 豪秒數十位數 */
  .ms10 {
    counter-reset: count-ms10  var(--ms10); 
    --a-name: oxxo-ms10;
    --a-time: 1s;    /* 動畫持續時間為 1 秒 */
    --a-steps: 10;   /* 分成十個步驟，也就是一個步驟 0.1 秒 */
  }
  .ms10::before {content: counter(count-ms10);}
  @-webkit-keyframes oxxo-ms10 {
    to {--ms10: 10;}
  }
  /* 豪秒數個位數 */
  .ms {
    counter-reset: count-ms  var(--ms); 
    --a-name: oxxo-ms;
    --a-time: 0.1s;  /* 動畫持續時間為 0.1 秒 */
    --a-steps: 10;   /* 分成十個步驟，也就是一個步驟 0.01 秒 */
  }
  .ms::before {content: counter(count-ms); }
  @-webkit-keyframes oxxo-ms {
    to {--ms: 10;}
  }

  input {display:none;}
  label {cursor: pointer;}
  #start:checked ~ .start {display: none;}
  #start:checked ~ * {
    --state: running;
  }
  .pause {
    display: none;
  }
  #start:checked ~ .pause {
    display: inline;
    background: #0c0;  /* 開始計時的時候，暫停按鈕會變成綠色 */
  }

  #start:checked ~ #pause:checked ~ .pause {
    background: #f55;  /* 暫停計時的時候，暫停按鈕會變成紅色 */
  }
  #start:checked ~ #pause:checked ~ * {
    --state: paused;
  }
  /* 設定碼表表單 form 的尺寸 */
  #stopwatch {
    margin: 50px;
    position: relative;
    width: 400px;
    height: 400px;
  }
  /* 設定碼圓形碼表的形狀，不能將表單改成圓形，因為按鈕在表單之下會無法點擊，必須額外設定另一個形狀 */
  .circle {
    display: block;
    position: relative;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: #ccc;
    border: 3px solid #000;
    z-index: 2;
  }
  /* 三個按鈕的位置和尺寸 */
  #reset, .start, .pause {
    position: absolute;
    border: 3px solid #000;
    width: 80px;
    height: 50px;
    left: calc(50% - 40px);
    top: -30px;
    cursor: pointer;
    background: #999;
  }
  /* 按下 reset 時的按鈕往下移動 */
  #reset:active {  
    top: -20px;
  }
  /* 數字欄位 */
  .result {
    position: absolute;
    z-index: 2;
    font-size: 60px;
    background: #333;
    color: #fff;
    text-align: center;
    padding: 10px 20px;
    border-radius: 10px;
    width: 300px;
    left: calc(50% - 170px);
    top: 150px;
    pointer-events: none;
  }
  /* 小小說明文字 */
  .result h5 {
    width: 100%;
    position: absolute;
    font-size: 14px;
    left: 0;
  }
  /* 暫停按鈕移動到旁邊 */
  .start, .pause {
    transform: rotateZ(45deg);
    left: 74%;
    top: 6%;
  }
  /* 按下暫停按鈕時，按鈕往內移動 */
  .start:active, .pause:active {
    left: 72%;
    top: 8%;
  }
  /* 開始按鈕是黃色 */
  .start {
    background: #f90;
  }
</style>

CSS 教學 - 純 CSS 碼表 ( 可計時 ) - 美化程式碼以及碼表樣式

小結

CSS 碼表使用了非常多 CSS 的進階技巧，例如變數、控制動畫、定位、虛擬類別...等，這些技巧雖然都很基本，但搭配起來卻能產生非常酷炫的效果，不過由於 CSS 的碼表「不是真的進位」，而是使用六組各自獨立的數字，因此如果要製作「真正準確」的碼表，建議還是使用 JavaScript 會比較妥當。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～

CSS 教學

基本介紹

認識 CSS 開始使用 CSS CSS 語法規則 CSS 命名原則 CSS 常用樣式屬性

CSS 選擇器

認識 CSS 選擇器 優先順序 ( 權重 ) 樣式繼承與聯集 使用巢狀結構語法 元素選擇器 ID 和 Class 選擇器 屬性選擇器 文件結構選擇器 虛擬類別選擇器 ( 結構 ) 虛擬類別選擇器 ( 類型 ) 虛擬類別選擇器 ( 輸入 ) 虛擬類別選擇器 ( 行為 ) 虛擬類別選擇器 ( 超連結 ) 虛擬類別選擇器 ( 邏輯 ) 虛擬類別選擇器 ( 其他 ) 虛擬元素選擇器 群組與組合選擇器

數值與單位

全域關鍵字與文字數值 長度與角度單位 位置名稱與時間單位 特殊樣式屬性 ( all、appearance)

規則與定義

變數 ( Variables ) 媒體查詢 ( @media ) 容器查詢 ( @container ) 自訂屬性值 ( @property ) 匯入樣式 ( @import ) 分層優先順序 ( @layer ) 定義字型 ( @font-face ) 計數規則 ( @counter-style ) 列印網頁 ( @page )

函式類型

數學計算 文字與清單計數 形狀與線段 路徑 ( path ) 生成內容與引號

顏色與濾鏡

顏色單位 色彩模型 漸層色 影像濾鏡 ( filter ) 背景濾鏡 ( backdrop-filter ) 混合模式 ( mix-blend-mode )

文字與段落

設定字型 ( font-family ) 使用外部字型 文字尺寸 文字樣式 ( 常用 ) 文字樣式 ( 其他實用 ) 文字樣式 ( 特殊用途 ) 文字換行 文字空白與 Tab 大小 文字行高與縮排 文字水平與垂直對齊 文字書寫方向 文字自動分欄 使用 Icon Font ( 圖示文字 ) 製作自己的 Icon Font

元素容器

容器顯示類型 ( display ) 元素 display 對照表 盒子模型 ( Box Model ) 寬高尺寸 內邊距 ( padding ) 外邊界 ( margin ) 邊框 ( border ) 邊框圓角 ( border-radius ) 影像邊框 ( border-image ) 輪廓 ( outline ) 內容溢出與裁切 ( overflow ) 內容範圍 ( contain ) 可見性與透明度

背景與陰影

背景 ( 背景色、背景裁切 ) 背景圖 ( 定位、尺寸 ) 背景圖 ( 固定、重複 ) 背景圖 ( 多重背景、混合 ) 背景縮寫 ( background ) 容器陰影 ( box-shadow )

清單與表格

清單樣式 清單計數器 表格基本樣式 表格邊框樣式 表格內容寬度與對齊

基本排版與定位

元素排版方式 浮動 ( float ) 浮動形狀 ( shape-* ) 定位 ( position ) 邏輯屬性 ( logical properties ) 重置 CSS ( Reset CSS ) 水平置中技巧 垂直置中技巧

Flex 彈性排版

Flexbox 彈性盒子 Flex 對齊方式 Flex 彈性伸縮

Grid 網格排版

Grid 網格容器與格線 Grid 網格空間與命名 Grid 網格流向與間距 Grid 排列網格項目 Grid 項目對齊與順序

轉場與動畫

轉場 ( transition ) 轉場觸發事件 動畫 ( animation ) 自訂動畫路徑 ( offset ) 動畫觸發事件 多重動畫的權重與順序 動畫進度控制 ( timeline )

變形、裁切與遮罩

裁切路徑 ( clip-path ) 影像遮罩 ( mask ) 物件填滿方式與定位 轉換函式 ( transform ) 平移、旋轉與縮放 3D 轉換與透視

視窗與使用者行為

捲軸樣式 ( scrollbar ) 拉霸、滑桿樣式 ( slider ) 滑鼠游標圖示 ( cursor ) 滑鼠事件 ( pointer-events ) 使用者選取 ( user-select ) 捲動行為 ( scroll、overscroll ) 列印換頁 ( break-* )

CSS 預處理器

認識 CSS 預處理器 Less ( 安裝、開始使用 ) Less ( 巢狀結構、選擇器 ) Less ( 變數、import ) Less ( Extend、Mixin ) Less ( 邏輯、迴圈、函式 )

範例效果

CSS 圓餅圖 CSS 跑馬燈 Google 載入動畫 電子時鐘數字 漸層色的轉場與動畫 漸層色製作星空背景 漸層色邊框 漸層色製作圖案背景 不規則形狀動畫 彈跳的正方形動畫 3D 正多面體 超連結底線動畫效果 噁心黏黏球效果 CSS 視差滾動效果 捲軸控制放射形選單 捲軸改變文字背景色 CSS 頁面捲動進度條 CSS 水波效果 圓點載入動畫 ( 陰影動畫 ) 字母翻牌效果 探照燈動畫 立體雙色跑馬燈 樓梯文字動態效果 漸層色文字、雙色文字 空心文字、文字水波背景 左右傾斜的背景效果 Icon 圖示形狀變換 故障文字效果 按鈕的多種 hover 效果 點擊展開或收折的選單 點擊愛心圖案放射效果 純 CSS 碼表 ( 可計時 )