<HTML5+CSS3>박스 관련 속성들

border-radius 속성 – 박스 모서리 둥글게 만들기

-백분율 (%) 크기 값을 사용합니다. 값은 기본으로 4개까지 지정할 수 있다. 순서대로 top-left,top-right, bottom-left, bottom-right순입니다. (테두리 위 왼쪽,오른쪽 ) (테두리 아래 왼쪽,오른쪽) 값이 한 개라면 네 방향의 크기가 모두 같습니다. right값이 생략된다면 마주고있는 left와 같은 크기를 가지고 역시 반대도 마찬가지입니다.

 

속성 값

(1)크기 : 둥글게 처리할 반지름 크기를 px나 em같은 단위와 함께 수치로 표시

(2)백분율 : 현재 요소의 크기를 기준으로 둥글게 처리할 반지름 크기를 %로 지정.

 

ex) div { border-radius : 20 px ; } ->모서리 부분 반지름 20px

 

border-*-raius 속성 = 박스 모서리 다르게 지정하기

-이 속성은 각기 다른 모서리를 구현 할 수 있다 border-top-left-radius(왼쪽 위), border-top-right-radius(오른쪽 위) (아래도 똑같이)

모서리를 둥글게 처리할 때 가로와 세로의 반지름 값을 ᄄᆞ로 지정하고 싶다면 가로 반지름,세로반지름 크기를 함께 대시( / )를 넣어 구분해서 지정합니다.

ex) border-radius: 가로 값/ 세로 값;

 

box-shadow속성-선택한 요소에 그림자 효과 내기

-이미지를 선택한다면 이미지에, div를 선탣한다면 div 전체에 그림자 효과를 추가한다 이때 이 속성값에 따라 그림자의 위치를 바꿀 수 있고 그림자 색상 흐리기 정도를 조절할 수 있다.

ex)box-shadow:수평거리 값 | 수직거리 값 | blur 값| 확장거리 값| 색상 값|inset;

 

%이 속성에서 수평거리와 수직거리는 반드시 지정해야 한다(필수)

 

속성 값

(1)수평거리 : 그림자가 수평으로 얼마나 떨어 졌는지 지정 양수=요소의오른쪽 음수=요소 왼쪽그림자 표시

(2)수직거리 : 그림자가 수직으로 얼마나 떨어져 있는지 지정 양수=요소 위쪽 음수=요소 아래쪽

(3)blur : 그름자의 흐림 정도를 지정 생략은 0 기본 값 (진한 그림자 표시) 값이 커질수록 부드러운 그림자

(4)확장거리 : 번지는 정도를 표현 기본값0 양수=퍼짐 음수=축소

(5)그림자색상 :　그림자 색 지정

(6)inset : 박스 안쪽에 그림자 표시 사용을 안하면 박스 바깥쪽에 그림자 표시.

 

ex)div { box-shadow: 2px 2px 5px 0 black } ->수평거리,수직거리,blur,확장거리,색상