CSS3로 멋진 여러 테두리 색상 만들기

저자：Eve Cole 업데이트 시간：2010-07-23 16:42:55

예, 알고 있습니다. 테두리 너비는 5px, 10px, 20px 또는 임의의 값이 될 수 있습니다.

그러나 각 1px 테두리에 별도의 색상을 설정할 수 있다고 상상해 본 적이 있습니까? 이 개념은 무엇입니까? 즉, 요소에 10px 테두리를 설정하면 이 10px 테두리 영역에 10가지 색상을 설정할 수 있습니다. 각 1px는 레이어(그룹)입니다. 데모: CSS3 border-colors의 여러 테두리 색상 세트에 대한 자세한 설명

이제 요소의 테두리 크기를 설정하는 방법을 검토해 보겠습니다(코드 블록 1).

위 코드는 className 테스트를 통해 div 요소에 대해 6px 테두리를 정의했음을 나타냅니다. 물론 이것은 4개의 변이 있는 직사각형입니다.

따라서 이 CSS 코드는 실제로 다음과 같이 구체화될 수 있습니다(코드 블록 2).

개선된 코드를 통해 우리는 실제로 직사각형의 네 면에 색상을 설정할 수 있음을 발견했습니다. 색상을 동일하게 설정해야 하는지 다르게 설정해야 하는지는 사용자의 필요에 따라 다릅니다.

세련된 코드를 실행하면(물론 각 측면의 색상을 변경할 수 있음) 6px 검정색 테두리가 있는 직사각형이 표시됩니다. 음, 이것이 우리가 기대하는 것입니다.

그러나 이제 6px 테두리를 6개의 그룹으로 나눌 수 있으며, 각 1px은 하나의 그룹이므로 각 테두리는 최대 6개의 다른 색상으로 설정할 수 있습니다.

어떻게 하나요? 살펴보세요(코드 블록 3):

.시험{

테두리 너비:6px;

테두리 스타일:단색;

테두리 상단 색상:#000 #fff #999 #aaa #ccc #eee;

테두리 오른쪽 색상:#000 #fff #999 #aaa #ccc #eee;

테두리 하단 색상:#000 #fff #999 #aaa #ccc #eee;

테두리 왼쪽 색상:#000 #fff #999 #aaa #ccc #eee;

}

.시험{

테두리 너비:6px;

테두리 스타일:단색;

테두리 상단 색상:#000;

테두리 오른쪽 색상:#000;

테두리 하단 색상:#000;

테두리 왼쪽 색상:#000;

}

.시험{

테두리:6px 솔리드 #000;

}