Chrome 上的弯曲边缘没有出现溢出

【问题标题】：Curved edges on Chrome not appearing with overflowChrome 上的弯曲边缘没有出现溢出
【发布时间】：2017-05-12 23:21:08
【问题描述】：

我已将列表的border-radius 设置为6px，它在所有浏览器中都可以正常工作，但在Chrome 中，top-right 和bottom-right 弯曲边缘在设置overflow 时被隐藏。这只是 Chrome 呈现它的方式吗？如果没有，我该如何解决这个问题？

我的代码：

<div class="container">
  <div class="list">
    <div class="list-item">
      Test 1
    </div>
    <div class="list-item">
      Test 2
    </div>
  </div>
</div>

JSFiddle Demo

【问题讨论】：

标签： html css google-chrome styles

【解决方案1】：

可能是 Chrome 中的一个错误。一种解决方法是使用 ::-webkit-scrollbar 前缀自定义滚动条。这个前缀在 Firefox 中被忽略了，它会将你的滚动条呈现为默认值，并且半径不变。

FIDDLE

示例：

  .container {
    width: 300px;
  }
  
  .list {
    overflow-x: hidden;
    position: relative;
    height: 300px;
    border: 1px solid #000;
    border-radius: 6px;
  }
  
  .list-item {
    padding: 13px 0 7px;
  }
  
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 6px;
  }

<div class="container">
  <div class="list">
    <div class="list-item">
      Test 1
    </div>
    <div class="list-item">
      Test 2
    </div>
    <div class="list-item">
      Test 3
    </div>
    <div class="list-item">
      Test 4
    </div>
    <div class="list-item">
      Test 5
    </div>
    <div class="list-item">
      Test 6
    </div>
    <div class="list-item">
      Test 7
    </div>
    <div class="list-item">
      Test 8
    </div>
  </div>
</div>

【讨论】：