預期:

我目前掌握的情況是:

我在視頻js的進度條上有這些白點。我把這些白點作為灰色進度條的子元素添加進去。這些白點出現在進度條的頂部。然而，我需要灰色進度條在這些特定的點上是透明的。如何用css達到這個效果？我想用線性漸變讓進度條在這些小點上變得透明。這是正確的方法嗎？

這是我的DOM結構:

<div class="vjs-slider">
  <div class="vjs-marker" style="left: 55.3719%;"></div>
    <div class="vjs-marker-dot"></div>
  <div class="vjs-marker" style="left: 6.61157%;"></div>
    <div class="vjs-marker-dot"></div>
</div>

更大的背景:我想為video.js章節標記實現這個進度條時間軸。video.js不支持章節標記，所以我必須自己構建這些章節標記，并將其附加到DOM元素中，并使用CSS進行樣式化。

任何幫助都將不勝感激。謝謝大家！

# # #您可以使用徑向漸變的組合，使點元素變得更寬，每邊都有與條形高度相同的半圓。

這里有一個簡單的例子。

<style>
  * {
    margin: 0;
  }
  
  .container {
    width: 100vw;
    height: 100vh;
    background: black;
    background-image: linear-gradient(transparent 0 50px, gray 50px 70px, transparent 50px 100%);
    position: relative;
  }
  
  .dot {
    position: absolute;
    top: 49px;
    left: 200px;
    background: black;
    background-image: radial-gradient(circle, gray 0 10px, black 10px 100%), radial-gradient(circle, white 0 10px, black 10px 100%), radial-gradient(circle, gray 0 10px, black 10px 100%);
    background-position: -10px center, center center, 50px center;
    width: 60px;
    height: 21px;
    background-repeat: no-repeat;
    background-size: 20px 20px;
  }
</style>
<div class="container">
  <div class="dot"></div>
</div>