---
# System prepended metadata

title: 技術｜CSS 筆記
tags: [技術]

---

# 技術｜CSS 筆記

## 資源
- css 的語法好多，好複雜 ＱＱ
- Game
    - https://cssbattle.dev/
    - https://flexboxfroggy.com/
    - https://cssgridgarden.com/
    - https://mastery.games/flexboxzombies/
    - http://www.flexboxdefense.com/
- Blog
    - [hackmd教學](https://hackmd.io/@fXEBtNoATaCwO3VmccEQ2Q/SkOfmV17t)
    - [w3school教學](https://www.w3schools.com/cssref/playdemo.php?filename=playcss_accent-color)

## 介紹
![image](https://hackmd.io/_uploads/rk2puhlkJg.png)
```css=
/* html 標籤 */
h1 {

}

/* 狀態變化 */
a{
    color: red;
}
a:hover {
    color: blue;
}

/* 選擇 "class:first" 的區塊 */
.first {
    color: red;
}

/* 後代選擇 */
.box h1{
    color: blue;
}
.box .first{
    color: red;
}
```

## 語法
- `box-shadow/drop-shadow` 陰影
    - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator
- 顏色漸層
    - https://www.oxxostudio.tw/articles/202008/css-gradient.html#google_vignette
    - `radial-gradient` 顏色放射漸層
        - `radial-gradient(circle at center, red 13%, blue 13% 40%, green 40%);`
    - `conic-gradient` 顏色旋轉漸層
        - `conic-gradient(red 25%, blue 25%, blue 50%, green 50%, green 75%, black 75%);`
- `transform` 對元素進行變形
    - 平移（位移）： `transform: translate(x, y);`
    - 旋轉： `transform: rotate(45deg);`
    - 縮放： `transform: scaleX(0.5) scaleY(2);`
    - 傾斜： `transform: skew(10deg);`
    - 轉場效果：`transition`
    - 動畫效果：`animation`
- 圓角效果
    - `border-radius:0 0 50% 50%`
    - `border-top-left-radius: 10px 10px;`
    - `border-top-right-radius: 10px 10px;`
    - `border-bottom-right-radius: 10px 10px;`
    - `border-bottom-left-radius: 10px 10px;`
- `Flex` and `Grid` 排版工具
    - https://b-l-u-e-b-e-r-r-y.github.io/post/Flexbox/