CSS3 박스 스타일 지정

CSS3 박스 스타일 지정

 

CSS 박스 스타일 속성

속성	설명	값
margin-top margin-right margin-bottom margin-left margin	박스 여백 지정	수치 퍼센트(%)
padding-top padding-right padding-bottom padding-left padding	박스안의 간격 지정	수치 퍼센트(%)
boder-top-width boder-right-width boder-bottom-width boder-left-width boder-width	박스 테두리 굵기 지정	수치 퍼센트(%)
boder-top-color boder-right-color boder-bottom-color boder-left-color boder-color	박스 테두리 색상 지정	색상 이름 RRGGBB 코드값
boder-top-style boder-right-style boder-bottom-style boder-left-style boder-style	박스 테두리 스타일 지정	none hidden dotted dashed solid double groove ridge outset inset

예제

 

CSS3에 추가된 박스 스타일 속성

속성	설명
border-radius	박스 라운딩 스타일 지정
box-shadow	박스 그림자 지정

 

① border-radius 속성

 

박스의 각 모서리를 둥글게 지정하는 역할을 수행합니다.

값은 퍼센트나 픽셀을 값으로 지정할 수 있으며, 값이 높을수록 더 둥글게 표현됩니다.

값을 하나만 지정하면 일괄적으로 네 개의 모서리의 라운딩이 지정되고, 특정한 부분만 라운딩을 지정할 수도 있습니다.

 

② box-shadow 속성

 

박스 그림자 스타일을 지정하는 역할을 수행합니다.

text-shadow 속성과 마찬가지로 그림자의 가로 위치, 세로 위치, 농도, 색상들을 값으로 지정해 줍니다.

형식

box-shadow: 가로위치   세로위치   농도   색상

 

예제