CSS3를 이용하여 둥근모서리를 만든다.



CSS3를 이용하면 이미지를 사용하지 않고 둥근 테두리를 만들 수 있습니다. 
다음과 같이 테두리 속성에 따라 설정을 하시면 됩니다.

   border-radius
   box-shadow
   border-image



브라우져 지원


IE9 지원, -border-radius
Firefox는 -moz- 라는 접두어를 추가하여 사용, -moz-border-radius
Chrome & Safari는 -webkit- 라는 접두어를 추가하여 사용, -webkit-border-radius
Opera는 -o- 라는 접두어를 추가하여 사용, -o-border-radius



CSS3 둥근 모서리 만드는 방법



결과보기




CSS3 박스 그림자 만드는 방법



결과보기



묘한오빠

남자의 호칭 중에 "오빠"처럼 묘한 것도 없었다

이미지 맵

묘한오빠/블로그가 변한다 다른 글

이 글에 담긴 의견 4

*

*

LiveRe. 이동

    • ^^; 둥근모서리 좋은데 IE에서는 잘 안보이는 것같더라고요.
      IE9만 지원되는건가요?

    • :) 네, IE는 IE9에서만 지원합니다. 그리고 제가 크롭만 사용한지 1년이 넘었구요.
      우리은행이 주거래은행이라 IE만 접속되는 잡코리아도 안본답니다.
      늦었지만, 새해 복 많이 받으세요.

    • border-image 도 글상자나 이미지 박스를 만들때 이미지들을 잘 활용하면 쓸모가 많겠더라고요.
      적당한 이미지를 구하거나 만드는게 좀 번거로워 잘 안쓰긴 하지만요;;

    • 요즘은 고사양PC에 죄신 OS를 많이들 사용하니 CSS로 어느정도 커버가 되니... 이미지를 정말 안쓰게 되죠 ^^

이전 글

다음 글