css3 : border-radius, box-shadow

border-radius와 box-shadow는 익스 9 이상 오페라, 사파리, 파폭, 크롬에서 적용된다.

border-radius

박스나 이미지에 라운드 효과를 주는 명령어

px 또는 % 를 쓸수 있다.

%를 쓸경우 타원형의 효과를 낼 수 있다.

<style>

.test {width:100px; height:100px; border:1px solid #000; border-radius:10px}

.test {width:100px; height:100px; border:1px solid #000; border-radius:10px 20px 30pxr 40px}

속기법 왼쪽 위 모서리 부터 오른쪽으로 ~

</style>

box-shadow

속성

x값 y값 blur(퍼짐 효과)크기 spread(늘이기 효과)크기 color inset(안쪽여백 안쓰면 바깥쪽)

<style>

.test {box-shadow:2px 2px 2px #000}(기본적인 형태 spread를 쓰진 않은 경우)

.test {box-shadow:2px 2px 2px 10px #000}(spread를 쓰는경우 네번째가 spread)

</style>