국경 반경 문제 CSS

Question

국경 반경에 약간의 문제가 있습니다. 나는 성공적으로 사각형을 반올림했지만, 내가 놓은 호버를 반올림하는 데 문제가 있습니다. 둥근 사각형의 위쪽과 아래쪽 모서리에는 호버 자체가 둥글 리지 않고 실제로는 사각형입니다. 나는 반올림을 시도했지만 중심을 반올림합니다. 나는 이것이 아마 아마 이해하지 않는다는 것을 당신이 여기에서 보는 것을 이해할 것이라는 점을 알고있다 : http://jsfiddle.net/hCg3J/

내가하고 싶은 것은 각 선택이 그 지역의 전체를 강조하고, 튀어 나오지 않도록하는 것이다.

HTML :

<ul class="pageitem"> 
    <li class="list" style="border-top:none;"><a href="iphone4.html";><span class="name">iPhone 4/4S</span><div class="arrow"></div></a></li> 
    <li class="list"><a href="iphone3.html";><span class="name">iPhone 3G/3GS</span><div class="arrow"></div></a></li> 
    <li class="list"><a href="ipod.html";><span class="name">iPod Touch</span><div class="arrow"></div></a></li> 
</ul> 

CSS

.pageitem { 
    -webkit-border-radius: 8px; 
    behavior: url(/border-radius.htc); 
    border-radius: 8px; 
    position:relative; 
    zoom: 1; 
    -moz-border-radius: 8em; 
    -khtml-border-radius: 8px; 
    border-radius: 8px; 
    background-color: #fff; 
    border: #878787 solid 1px; 
    font-size: 12pt; 
    overflow: hidden; 
    padding: 0; 
    height: auto; 
    width: auto; 
    margin: 3px 9px 17px; 
    list-style: none 
} 

Answer 1

그냥 .list:hover, name:hover에 적절한 -webkit-border-radius을 추가하고 필요에 맞게 조정합니다.

여기에 jsfiddle proof of concept입니다. 당신이해야 할 일은 상단 요소와 하단 왼쪽 요소에 대해 왼쪽 위와 오른쪽 상단 모서리를 둥글게하고 맨 아래 요소에 대해서는 buttom-right를 둥글게 만드는 것입니다. 이러한 요소에 대한 특수 클래스를 추가하는 것이 좋습니다.

UPDATE :

사실

내가 코멘트에 제안 내가 먼저 자녀와 마지막 아이 선택기를 추가 한,

.list:hover:first-child, name:hover:first-child { 
    -webkit-border-radius: 8px 8px 0px 0px; 
} 

.list:hover:last-child, name:hover:last-child { 
    -webkit-border-radius: 0px 0px 8px 8px; 
}