새로운 CSS3 Border Techniques

테두리는 처음부터 CSS의 일부 였지만 CSS3에서는 새로운 옵션을 추가했습니다. 최신 브라우저는 둥근 모서리와 상자 그림자는 물론 이미지로 만든 테두리를 지원합니다. 이러한 기법을 사용하면 흥미 진진한 새로운 기능을 설계에 추가 할 수 있습니다.

이미지 테두리

CSS3에서는 요소 테두리에 이미지를 사용할 수 있습니다. 이 메커니즘은 이미지의 가장자리를 감지하고 이미지의 가장자리와 모서리에서 테두리의 모서리와 모서리를 만들기 위해 "조각"하기 때문에 매우 강력합니다.

프레임 이미지는 프레임으로 저장됩니다. png 파일을 HTML 파일과 같은 디렉토리에 저장합니다. 그것은 투명한 중심을 가지고 있습니다. 다음 코드를 적용하여 페이지의 모든 요소 주위에 이미지 테두리를 추가합니다.

h2 {border-width: 15px; border-image: url ("frame. png") 25 % 반복; -webkit-border-image: url ("frame. png") 25 % 반복; -moz-border-image: url ("frame. png") 25 % repeat;}

다음은 테두리 이미지를 추가하는 방법입니다.

이미지를 수집합니다.

이미지는 이미 어떤 종류의 테두리로 디자인되어 있어야합니다. 일반적으로 단색 중심 또는 투명 중심을 사용하여 모서리 주변의 모양이됩니다.
테두리 너비를 지정하십시오.

테두리 너비를 직접 지정해야합니다. 프레임 이미지의 테두리는 원하는 크기에 맞게 조절됩니다.
원하는 이미지의 경계선을 계산합니다.

백분율 기호를 벗어나면 값은 픽셀 단위로 계산됩니다. 각 경계에 대해 서로 다른 양의 원본 이미지를 사용하려면 4 개의 값을 추가 할 수 있습니다.
원하는 행동을 나타냅니다.

원본 이미지는 원하는 요소와 거의 같은 크기가 아니므로 브라우저가 원본보다 큰 요소를 처리하는 방법을 설명하는 팁을 제공 할 수 있습니다. 가장 일반적인 선택은 반복 (원본 이미지 반복) 또는 늘리기 (전체 공간 차지)입니다. 프레임과 같은 단순한 이미지. 이 예제에서 사용 된 png는 결과가 동일합니다.

둥근 모서리를 추가하는 방법

구형 CSS는 매우 직사각형으로 알려져 있었기 때문에 웹 디자이너는 둥근 모서리를 추가하여 디자인을 부드럽게하려고했습니다. 이것은 달성하기 힘든 결과였습니다. CSS3는 테두리 반경 규칙을 사용하여 둥근 모서리를 간단하게 만들 수 있습니다.

태그를 지원하는 브라우저에서 둥근 모서리를 쉽게 구할 수 있습니다:

모서리. html h1 (너비: 60 %; 배경색: # 000066; color: # 9999ff; 테두리: # 9999ff 3px 그루브; 여백: 자동; 텍스트 정렬: 가운데; border-radius:. 599;}

둥근 모서리 데모

규칙은 요소의 각 모서리에서 호를 절단하여 작동합니다.호에는 지정된 반지름이 있으므로 날카로운 모서리의 경우 작은 반지름을 원할 것입니다. 일반 측정에서 반경을 측정 할 수 있지만 픽셀 (px)과 문자 폭 (em)이 가장 일반적으로 사용됩니다.

요소의 배경색이나 테두리가 정의되어 있지 않으면 테두리가 표시되지 않습니다. 특정 모서리를 지원하기 위해 각 태그의 변형이 있음에 유의하십시오. 요소의 네 모퉁이에 같은 반경을 적용하지 않으려는 경우 유용 할 수 있습니다. 가장 최근의 브라우저는 일반적인 테두리 반경 규칙을 지원합니다.

벤더에 특정한 접두어를 사용하여 여러 세대의 브라우저를 선택할 수 있습니다. 브라우저가 경계선 반경 규칙을 이해하지 못하면 일반 제곱 된 모서리를 만듭니다.

상자 그림자를 추가하는 방법

상자 그림자는 깊이에 환상을주기 위해 요소에 종종 추가됩니다.

상자 그림자 효과는 달성하기 어렵지 않지만 일반적으로 클래스 정의의 일부로 수행되므로 페이지 전체에서 다시 사용할 수 있습니다. 다음은 몇 가지 샘플 코드입니다:

boxShadow. html. 그림자 {박스 그림자: 10px 10px 10px # 000000; 높이: 200px; 너비: 200px; 패딩: 1em; 테두리: 1 픽셀 단색 검정; border-radius: 5px; background-color: #EEEEEE;}

상자 그림자 데모
이 상자는 그림자가 있습니다.

상자 그림자를 추가하는 것은 CSS3에서 이전보다 훨씬 쉽습니다. 다음 단계가 있습니다:

클래스를 정의하십시오.

페이지의 여러 요소에 동일한 설정을 적용하려는 경우가 많으므로 상자 그림자는 배경색 및 테두리와 같은 다른 요소와 결합되어 페이지 전체에서 재사용 할 수 있습니다.
박스 섀도우 규칙을 추가합니다.

최신 브라우저는 표준 상자 그림자 규칙을 지원하지만 이전 브라우저를 지원하기 위해 브라우저 접두사를 포함 할 수도 있습니다.
오프셋을 지정하십시오.

그림자는 일반적으로 자신이 속한 사각형에서 오프셋됩니다. 처음 두 값은 수평 및 수직 오프셋을 나타냅니다. 표준 CSS 측정 값 (일반적으로 픽셀 또는 em)을 사용하여 측정하십시오.
흐림 및 확산 거리를 결정합니다.

그림자가 얼마나 빨리 그리고 얼마나 멀리 퍼지는지 지정하여 그림자의 동작을 추가로 수정할 수 있습니다. 이들은 선택적 매개 변수입니다.
그림자 색상을 나타냅니다.

원하는 색상으로 그림자를 만들 수 있습니다. 검정색과 회색이 일반적이지만 다른 색상을 선택하여 흥미로운 효과를 얻을 수 있습니다.