滚动时没有受损的边框半径

Question

我的客户端有问题。

他是一位着名的设计师，无法相信它不可能与border-radius和overflow: scroll保持完好无损的边界。

有人可以向他解释一下吗？

＆＃13;

＆＃13;

.example{
    width: 100px;
    height: 50px;
    border: 2px ridge gold;
    border-radius: 14px;
    overflow-y: scroll;
}

＆＃13;

<div class='example'></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试这样

.example {
  position: relative;
  width: 105px;
  height: 52px;
  border: 2px ridge gold;
  border-radius: 14px;
  z-index: 1;
}

.example div {
  position: absolute;
  width: 100px;
  height: 50px;
  top: 2px;
  overflow-y: scroll;
}

<div class='example'>
  <div>
  </div>
</div>

或 尝试使用box-shadow创建滚动条周围的边框类型感觉

.example {
  width: 100px;
  height: 50px;
  border: 2px ridge gold;
  border-radius: 14px;
  overflow-y: scroll;
  box-shadow: 3px 3px gold, 4px -3px gold, -3px 2px gold, -2px -2px gold;
}

<div class='example'>

</div>

Answer 2

如果要将滚动条与边框半径对齐，则必须样式 滚动条。

实施例

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track,
 ::-webkit-scrollbar-thumb {
  border-radius: 14px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  margin: 7px;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.example {
  width: 100px;
  height: 50px;
  border: 2px ridge gold;
  border-radius: 14px;
  overflow-y: scroll;
}

<div class='example'>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, delectus eligendi ipsa harum, sunt reprehenderit aliquid, debitis consequuntur minus, ratione odit esse ullam expedita eveniet! Sint iure in blanditiis, accusamus.</p>
</div>