###### tags: css
# CSS

* **clip-path**: 使用裁剪方式創建元素的可顯示區域。區域内的部分顯示，區域外的隱藏。
`clip-path: circle(40%);`

---

以下可利用CSS做到scroll smooth並且卷軸滑動時自動跳到接近的SECTION。
(並不適用於全部瀏覽器)
**範例：** https://codepen.io/yichingw/pen/RwLvGvR
* **scroll-behavior(container)**
* scroll-behavior: smooth;
* scroll-snap-type: y mandatory;
* **scroll-behavior(section)**
* scroll-snap-align: center;
*

---

* **transition**

transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;

shorthand↓
`transition: width 2s linear 1s;`

Note: The transition effect has a 1 second delay before starting.

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s linear 1s;
}

div:hover {
  width: 300px;
}

* ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
* linear - specifies a transition effect with the same speed from start to end
* ease-in - specifies a transition effect with a slow start
* ease-out - specifies a transition effect with a slow end
* ease-in-out - specifies a transition effect with a slow start and end
* cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function

---

* **backdrop-filter**
The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.

/* URL to SVG filter */
backdrop-filter: url(commonfilters.svg#filter);

/* <filter-function> values */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

---

* **box-model**
1. **margin(box model 的外邊距)**：和其他元素的距離
* **Margin 邊距重疊 ( Collapsing margins )**
當一個 Block 的 下邊界範圍 ( margin-bottom ) 和一個 Block 的 上邊界範圍 ( margin-top ) 都有設定時只會留下最大那個，這種情況我們稱為邊界重疊 ( margin collapsing )。請留意設定了 float 或絕對定位的元件並不會產生邊界重疊。

**不過在下列的情形中，元素「不會」發生邊距重疊：**
* 「父元素」有設定 padding 或 border 的寬度。
* 水平邊距不會重疊。
* 屬於「不同的 BFC 內」的元素，例如：
* position 使用 absolute、fixed 的元素。
* 元素間穿插了 BFC 元素，例如 inline、table...等。
* display 屬性為 inline-block、table-cell、table-caption 的元素。
* display 屬性為 flex、inline-flex、grid、inline-grid 的元素。

2. **boder(box model 的邊框)**：元素邊框
3. **padding(box model 的內邊距)**：內容和邊框距離

---

* **box-sizing**

border 的寬度是從 padding 的邊界往延伸，下圖可以清楚看出有 box-sizing 為 **border-box** 和 **content-box** ( 預設值 ) 的影響，如果是 content-box，則內容 content 寬度不變，padding 和 border 往外延伸，如果設定為 border-box，則 border 和 padding 會往內延伸，border 的邊界會和原本的 content 邊界 ( 沒有設定 padding 和 border ) 相同。


---