CSS border 요약

Border

border 프로퍼티로 굵기, 스타일, 컬러 를 정의할 수 있습니다.

• 굵기 는 border-width 로써 경계선의 굵기를 정의하며

border-top-width | border-right-width | border-bottom-width | border-left-width

로 각 위치별로 따로 정의할 수 있습니다.

• border-style에서 경계선의 스타일을 정의할 수 있습니다.

style은

border-top-style | border-right-style| border-bottom-style| border-left-style

로 각 위치별로 따로 정의할 수 있습니다.

• 마지막으로 border-color로 경계선의 색을 정의할 수 있습니다.

border-width : 1px; border-style : dotted; border-color : #000; 위 인자들을 이용해 만든 border는 border : 1px dotted #000; 로 줄일수 있습니다.

border-radius 를 사용하여 둥근 모서리를 만들수 있습니다.

이 값은 border에 둥근 모서리를 만들수 있게 해 주며, border가 설정되어있어야만 보입니다.

border-radius : 1px;

border : 1px solid #000;

위와같이 border값 설정이 필요합니다.

• border-radius값은 아래의 네가지 프로퍼티들의 조합입니다.

border-top-left-radius | border-top-right-radius | border-bottom-right-radius | border-bottom-left-radius

그러므로 특정 위치만 둥근 모서리를 만들고 싶을때

border-top-left-radius : 1px; border-top-right-radius : 0px;

border-bottom-right-radius : 1px; border-bottom-left-radius : 0px;

혹은

border-radius : 1px 0 1px 0;

으로 표현 할 수 있습니다.

border-radius 의 인자값이 두가지 혹은 세가지로도 표현이 가능하며,

border-radius : param1, param2, param3, param4

param3의 default value는 param1과 동일하며,

param4의 default value는 param4와 동일합니다.

border-image 로 경계선에 이미지 띄우기

해당 프로퍼티는 세가지의 값을 받는데,

이미지 경로, 이미지를 자르는 시작점, 모서리가 아닌 영역에서의 이미지 처리방법 을 정의합니다.

• 이미지 경로는 말 그대로 background에 쓰일 이미지 경로를 정의하며
• 이미지를 자르는 시작점의 경우,

우선 border-image에 입력된 이미지는 3x3 으로 총 9개의 이미지가 slice됩니다.

이 slice된 영역들은 border의 각 꼭지점과 면을 담당하게 됩니다.

하지만 필요에따라 이 slice하는 영역을 변경해야하는 경우가 생기는데 이때 이곳에서 slice할 영역을 정의하는것 입니다. 30% 로 자른경우, 
이미지 총 길이에서 30%씩 start, end영역을 자르며, 나머지 영역인 40%는 면에 그리게됩니다.

만일 이 자리는 영역이 50% 가 넘어가게 되면, start와 end영역에만 그려지며, 면에는 그려지지 않습니다(남은 영역이 없기 때문에)

• 이미지 처리방법의 경우에는 stretch와 repeat 가 있습니다. 위의 자르는 영역에서 나온 면 부분의 이미지를 늘리거나 반복시킵니다.