CSS3, box-shadow 예제

반응형 웨 제작을 위한 CSS3

CSS3 속성은 속성 앞에 브라우저를 식별할 수 있는 접두사인 벤 더 프리픽스(CSS3 Vendor Prefix)를 붙여 사용합니다. CSS3의 속성들은 대부분 IE8 이하에서는 표현되지 않기 때문입니다.

ex> 파이어폭스에서 배경에 그라디언트를 주고자 할 때 backgroun: -moz-linear-gradient(top, #06f, #fff); 와 같이 사용해야 합니다.

● 경계선(Borders)

Borders 속성으로 모서리를 둥글게 하는 것과 네 모서리 중 원하는 부분만 둥글게 표현하여 원, 반원, 4분의 1조각짜리 원 등을 표현하게 됩니다.

그리고 박스에 그림자를 드리우는 box-shadow 속성과 테두리에 무늬를 부여하는 border-image 속성까지 가능합니다.

● box-shadow: inset 0px 0px 20px 15px rgba(25, 70, 50, 0.8);

● inset는 박스의 그림자가 안쪽으로 퍼진다.

● 그 다음 수치는 가로로 밀리는 폭

● 그 다음 수치는 세로로 밀리는 폭

● 그 다음 수치는 그림자가 퍼지는 정도

● 그 다음 수치는 그림자와 박스의 거리

● 마지막은 그림자 색상

** 괄호 안은 red, green, blue 순입니다.

<!DOCTYPE html>

<head>

body { font:12px/1.5em "Arial Black"; margin:20px; }

h1 { float:left; margin-right:20px; }

h1 a { display:block; font-size:40px; text-decoration:none;

text-align:center; color:#000; width:180px; padding:50px;

border:1px solid rgb(25, 70, 50); border-radius:15px;

background-color:#eee; box-shadow: inset 0px 0px 20px 15px rgba(25, 70, 50, 0.8); }

h1 a:hover { background-color:#F2F5A9; }

</style>

</head>

<body>

<h1><a href="#">HAPPY</a></h1>

</body>

</html>

예제 그림)

Funny 기이린