html - 使用 CSS 将边框半径应用于滚动条

Question

简单来说，这就是我想要的(使用 -webkit-scrollbar 在 Webkit 浏览器上获得):

这就是我在 Opera 上得到的(Firefox 也不将边框半径应用到滚动条，但仍然应用边框):

有没有简单的方法让滚动条下的边框不消失？

我不需要-webkit-scrollbar 的华丽风格，但我希望页面看起来干净且对称...

Answer 1

我也遇到了同样的问题。这不是最优雅的解决方案，但只需在外框内放置一个较小的 div，这样滚动条就不会与外框重叠。

喜欢从this pen复制的这段代码:

.box {
  height: 200px;
  width: 250px;
  border-radius: 10px;
  border: 2px solid #666;
  padding: 6px 0px;
  background: #ccc;
}

.box-content {
  height: 200px;
  width: 250px;
  overflow: auto;
  border-radius: 8px;
}

<div class="box">
  <div class="box-content">
    <ol>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ol>
  </div>
</div>