[CSS3] Image 원형 테두리 만들기

실질적으로 이미지에 대한 원형을 만들려면, 해당 이미지의 사이즈를 알아야만 가능하다.
해당 방식에 포인트는 다음과 같다.

[ CSS 내용 ]

.circular { 
  width: 300px; height: 300px; 
  border-radius: 150px;
  -webkit-border-radius: 150px;
  -moz-border-radius: 150px; 
  background: url(http://link-to-your/image.jpg) no-repeat;
  box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8); 
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8); 
}

 

[ HTML 내용 ]

<div class="circular"><img src="http://link-to-your/image.jpg" alt="" /></div>

 

이미지 라운딩처리

 

http://bavotasan.com/2011/circular-images-with-css3/