아래쪽 테두리 아래에 테두리 테두리 표시

Question

좋아, 그래서 나는 다른 색상으로 8 픽셀 테두리 아래 회색 왼쪽과 오른쪽 테두리가있는 인수가 있습니다.

테두리 표시 방법은 왼쪽 테두리와 오른쪽 테두리 안에 아래쪽 테두리를 표시합니다. 필자는 약간의 연구를했지만 밑바닥 경계가 내부 경계선 아래에 표시 될 수있는 방법을 찾을 수 없습니다. 미안해. 이걸 너무 잘 설명하지 못했다면, 더 자세한 정보가 필요하면 언제든지 물어보십시오. 아래 링크를 클릭하여 내가 만든 빠른 피들을 따르십시오. 사전 사람

<div class="bg"> 
     <div class="box"> 
      Box 
    </div> 
</div> 
.bg { 
    background-color: #fff; 
    width: 72%; 
    float: left; 
    height: 100%; 
    padding: 100px; 
} 
.box { 
    background-color: #fff; 
    height: 200px; 
    width: 200px; 
    float: left; 
    margin-left: 100px; 
    border-left: 1px solid #ccc; 
    border-right: 1px solid #ccc; 
    border-bottom: 8px solid black; 
} 

http://jsfiddle.net/L06s4k50/

감사합니다.

.box { 
    border-left: 1px solid #ccc; 
    border-right: 1px solid #ccc; 
    box-shadow: 0px 8px black; 
} 

Answer 1

나는 이것에 대해가는 가장 좋은 방법은 완전히 border-bottom을 포기하고, 대신 상자 그림자 속성을 사용하는 것입니다 생각합니다. 좀 더 가까이서 보면 아래쪽 테두리의 위쪽 4 픽셀이 오른쪽 및 왼쪽 경계선의 "안에"있습니다. 하단 4px는이 외부에 있습니다.