普通文組 2.5

「捲軸樣式、影片背景與box-decoration-break」相關筆記

總結

集中記錄一些在 AC 與 Udemy Advanced CSS and Sass 課程中學到的技巧

See the Pen landing with video by Charlie (@Charlie7779) on CodePen.

筆記

捲軸樣式

See the Pen scrollbar by Charlie (@Charlie7779) on CodePen.

  • 沒有 vendor prefix 的scrollbar-color目前支援度不佳，參考：Can I use: scrollbar-color?
  • 改用::-webkit-scrollbar、::-webkit-scrollbar-track與::-webkit-scrollbar-thumb來設定捲軸樣式

影片背景

  • 外部 container 設定為position: relative;，內層<video>元素設定為position: absolute;與top: 0;、left: 0;來根據 container 進行定位
  • <video>本身沒有src，影片來源需透過子代的<source>元素設定
  • 可透過<source>設定影片相關特性，比如autoplay、loop與muted等，參考：HTML video Tag: Optional Attributes
  • 加上object-fit: cover;確保在任何螢幕尺寸下都能維持原始比例並占滿畫面
  • 素材來源：Coverr

box-decoration-break

  • 預設值為slice

    demo slice

  • 設定為clone後，換行處會補齊樣式設定

    demo clone

  • 設定line-height: 1.75;來撐開換行後行與行之間的距離

    • MDN: The used value is this unitless <number> multiplied by the element’s own font size. The computed value is the same as the specified <number>. In most cases, this is the preferred way to set line-height and avoid unexpected results due to inheritance.
    • 沒有加上單位的情況下，line-height的計算方式為字體大小乘以設定的數值

參考文件