「捲軸樣式、影片背景與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

  

• 設定為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的計算方式為字體大小乘以設定的數值

參考文件

• MDN: scrollbar-color
• CSS-Tricks: scrollbar
• CSS-Tricks: Custom Scrollbars in WebKit
• MDN: box-decoration-break
• MDN: line-height