iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 24
1
Modern Web

HTML 與 CSS 學習筆記系列 第 24

Day24 - CSS (5) - 圓弧、陰影

圓弧

  • 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 支援的語法狀況

參考資料

次回

再說明一下 CSS 的漸層吧


上一篇
Day23 - HTML 與 CSS (7) - Form 表單
下一篇
Day25 - CSS (6) - 漸層、權重
系列文
HTML 與 CSS 學習筆記31

尚未有邦友留言

立即登入留言