3

境界半径と子要素には既知の問題があります。子要素は、親の丸みを帯びた角からはみ出しています。

overflow:hidden一般的な解決策は、親要素に追加することです。しかし、親がposition:absolute.

http://jsfiddle.net/Xhrx8/2/

4

5 に答える 5

3

HTML

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

CSS

#items {
border: 1px solid black;
border-radius: 10px;
overflow: hidden;
position: absolute;
}

 #items div {
border-bottom: 1px solid black;
padding: 5px;
}

#items #top:hover {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
background-color: #ccc;
}
#items div:hover{
background-color: #ccc;
}
#items #bottom:hover {
background-color: #ccc;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
 }

ライブ例http://jsfiddle.net/Xhrx8/3/

于 2013-02-22T11:57:07.513 に答える
2

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します#items

フィドル

于 2013-02-22T11:59:10.227 に答える
1

私は user1136403 の答えが好きですが、最初と最後の子の css セレクターを使用します。そうすれば、HTML の最初と最後の li に id="top", id="bottom" を追加する必要がなくなります。

HTML

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

CSS

#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;
}

また、最初の最後の子 css ブロックには「background-color」は必要ないことに注意してください。#it​​ems div:hover{} で既に定義されています。これがフィドルです。 http://jsfiddle.net/honkskillet/CHL8K/

于 2013-11-16T18:29:28.320 に答える
1

これは Chrome の既知のバグです (Firefox では正常に動作します)。

DIV #items の周りにラッパーが必要になり、そのラッパーにプロパティを割り当てます。

于 2013-02-22T11:57:50.430 に答える
0

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);
}
于 2016-10-19T15:07:34.650 に答える