# 技術｜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)

## 介紹

/* 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/