[CSS] 연속된 div, li 등에 테두리 보이기 (border 겹치기 문제를 해결)

box-shadow: h-offset(오른쪽) v-offset(아래쪽) blur spread color;
box-shadow:1px 0 0 0 #aaaaaa; [오른쪽 1px 효과)
box-shadow:0 1px 0 0 #aaaaaa; [아래쪽 1px 효과)
inset 값이 주어진 경우는 안쪽, 즉 반대가 된다.
box-shadow:1px 0 0 0 #aaaaaa inset; [왼쪽 1px 효과)
box-shadow:0 1px 0 0 #aaaaaa inset; [윗쪽 1px 효과)

• 전체 보기
• 대한민국
• 미국
• 중국
• 일본
• 러시아
• 대한민국
• 미국
• 중국
• 일본
• 러시아
• 대한민국
• 미국
• 중국
• 일본
• 러시아

<style type="text/css">
#block-wrap { width:600px; }
#block-wrap * { box-sizing:border-box; }
ul.menu { margin:0; padding:0; }
ul.menu li { list-style:none; float:left; box-shadow:1px 0 0 0 #aaa, 0 1px 0 0 #aaa, 1px 0 0 0 #aaa inset, 0 1px 0 0 #aaa inset, 1px 1px 0 0 #aaa; }
ul.menu li.on { background:#1772a8; }
ul.menu li a { display:block; padding:10px 30px; text-decoration:none; color:#000000; }
ul.menu li.on a { color:#ffffff; }
</style>

<div id="block-wrap">
    <ul class="menu">
        <li><a href="#">전체 보기</a></li>
        <li class="on"><a href="#" class="on">대한민국</a></li>
        <li><a href="#">미국</a></li>
        <li><a href="#">중국</a></li>
        <li><a href="#">일본</a></li>
        <li><a href="#">러시아</a></li>
        <li><a href="#">대한민국</a></li>
        <li><a href="#">미국</a></li>
        <li><a href="#">중국</a></li>
        <li><a href="#">일본</a></li>
        <li><a href="#">러시아</a></li>
        <li><a href="#">대한민국</a></li>
        <li><a href="#">미국</a></li>
        <li><a href="#">중국</a></li>
        <li><a href="#">일본</a></li>
        <li><a href="#">러시아</a></li>
    </ul>
</div>

추가 li에 background 색상을 지정하면 top과 left에 boder 효과가 사라진다.
이 경우는 li에 padding:1px 0 0 1px 주면 해결