Hover CSS边框半径父子问题（带：悬停和位置：绝对）

边界半径和子元素存在已知问题。子图元从父图元的圆角处凸出

常见的解决方案是向父元素添加

溢出：隐藏
。但当父对象具有
位置：绝对
时，它仍然不起作用

HTML

 <div id="items">
<div id="top">One</div>
<div>Two</div>
<div>Three</div>
<div id="bottom">Four</div>

实例
这是Chrome中的一个已知错误（在Firefox中运行良好）

您需要在DIV#项周围使用一个包装器，并为该包装器分配属性。
这似乎是chrome css的一个缺陷。

我们可以做的一个变通方法是使用包装器作为

<div style="position:absolute">
    <div id="items">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
    </div>
<div>


一个
两个
三
四

并从
#项中删除
position:absolute

我喜欢user1136403的答案，但我会使用第一个和最后一个子css选择器。这样，您就不必在HTML中的第一个和最后一个li中添加id=“top”，id=“bottom”

HTML

还要注意，在第一个、最后一个子css块中不需要“背景色”。它已经在#items div:hover{}中定义。这是小提琴。
您需要通过css3强制硬件加速

#items {
[......]
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

可能重复的作品在演示，但不在我的真实代码。我不能在这里发布真正的代码，也不能本地化问题。无论如何，谢谢你。
<div id="items">
   <div >One</div>
   <div>Two</div>
   <div>Three</div>
   <div >Four</div>
</div>

#items {
border: 1px solid black;
border-radius: 10px;
overflow: hidden;
position: absolute;
}
#items div {
border-bottom: 1px solid black;
padding: 5px;
}    
#items div {
border-bottom:none; //removes the double border on the bottom
}
#items div:hover{
background-color: #ccc; //this is the only background color def you need
}
#items div:first-child:hover {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
#items div:last-child:hover {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}

#items {
[......]
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}