페이스북이나 각종 SNS 웹페이지에서 주로 보여지고 있는 둥근 프로필 이미지를
포토샵없이 CSS만으로 가능한데요, 바로 border-radius 를 이용하면 됩니다..
만약 이미지 크기가 100px * 100px 라면
img {
width: 100px;
height:100px;
border-radius: 50px; /* 이미지 반크기만큼 반경을 잡기*/
}
2. 레이어에 백그라운드 이미지 깔고 border-radius 사용
#radius-box {
width: 100px;
height: 100px;
background-image:url("배경이미지경로");
border-radius: 150px; /* 레이어 반크기만큼 반경을 잡기*/
display: table-cell;
vertical-align: middle;
color: #ffffff;
font-weight: bold;
text-align: center;
}
단, 위 내용은 CSS3에서만 적용가능하며,
일부 브라우저 에서는 지원이불가능 합니다.
이때 사용할 수 있는 팁으로,
가운데 원형을 제외한 영역이 채워진 png이미지를 만들어
absolute를 활용해 이미지 위에 겹쳐 포개는 형식으로 대체하실 수 있습니다.
