圓弧

• border-radius：圓弧屬性，可設定 4 組，可以為 px 或是 % ，從左上開始，順時鐘為左上、右上、右下、左下
  • 設定 1 個：代表全部通用，如 border-radius: 50% 會出現圓形(因為 4 邊各佔 50% 的圓弧)
  • 設定 2 個：代表對角共用，左上與右下共用，右上與左下共用，如 border-radius: 0px 10px 會左上與右下顯示為直角(0)
  • 設定 3 個：也就是最後一個左下未指定，依照上個原則，沿用對角(右上)的設定，如 border-radius: 0px 5px 20px 左下會沿用右上都是 5px 的小圓弧
  • 設定 4 個：當然就是 4 邊各自設定了
• 如果有加 border，會隨著圓弧效果一起呈現

.box {
    height: 150px;
    width: 150px;
    background: #000;
    border-radius: 50%;
    border: 10px solid red;

    color: #fff;
    line-height: 150px;
    font-size: 30px;
}

下半部應該可以看到是屬於設定文字的設定，其中把 line-height 設定與 Box 的 height 等高，可以呈現出讓文字置中的效果

陰影

• box-shadow：陰影屬性，可設定 6 組
  • 水平：正代表右移，負代表左移，0 為 2 邊都有
  • 垂直：正代表下移，負代表上移，0 為 2 邊都有
  • 陰影大小：設定陰影的大小，預設未寫為 0px
  • 擴散尺寸：擴散大小，有點像漸層，預設未寫為 0px
  • 陰影顏色：陰影的顏色，預設未寫為 color 設定色
  • 內陰影：若加入 inset 代表陰影往內，預設未寫為外陰影

可以依序測試不同 box-shadow 呈現出來的結果

.box {
    height: 200px;
    width: 200px;
    background: green;
    box-shadow: 0px 0px;

    box-shadow: 5px 5px 10px;

    box-shadow: 5px 5px 10px 10px;

    box-shadow: 5px 5px 10px 10px gray;
    
    box-shadow: 5px 5px 10px 10px gray inset;
}

或是點選 CSS Maker 的連結，嘗試不同效果

小工具

• statcounter：可用來看目前瀏覽器的趨勢佔比
  • 在 Edit Chart Data 裡面，可以選擇要看何種介面(桌面、手機)、瀏覽器版本、時間、國家 (Region 選 Taiwan)
• Can I use：在上面打語法，可以確認各個瀏覽器的支援狀況
• Clippy：可以看到一些形狀的寫法，調整後直接使用
• Campaign Monitor：查 E-mail 支援的語法狀況

參考資料

• CSS3 的 border-radius 圓角效果
• CSS3 區塊陰影 Box-Shadow
• [CSS3]box-shadow 區塊陰影
• box-shadow

次回

再說明一下 CSS 的漸層吧