.circle
{
width:200px;
height:200px;
background:
}
.circle
{
width:200px;
height:200px;
border-radius:8px;
background:
}
.circle
{
width:200px;
height:200px;
border-radius:50%;
background:
}
.circle
{
width:200px;
height:200px;
border-radius:50%;
background:
font-size:16px;
text-align:center;
}
.circle
{
width:200px;
height:200px;
border-radius:50%;
background:
font-size:16px;
text-align:center;
}
@import url( 사진 주소 )
.circle
{
width:200px;
height:200px;
border-radius:50%;
background:
font-size:16px;
text-align:center;
font-family:'MalgunGothic';
background:url(./img/108.gif) center 100% no-repeat;
}
.circle
{
width:200px;
height:200px;
border-radius:50%;
background:
font-size:16px;
text-align:center;
font-family:'MalgunGothic';
background:url(./img/108.gif) center 100% no-repeat;
border:6px solid #fff;
box-shadow: 0 0 16px rgb(0,0,0);
}
IE8 이하의 브라우저에서는 CSS3가 적용되지 않는다.
크롬, 파이어폭스, 사파리 등의 하위 브라우저에서도 CSS동그라미 모양이 지원되도록 아래의 스타일을 추가한다ㅣ.
.circle
{
width:200px;
height:200px;
border-radius:50%;
-webkit-border-radious:50%;
-moz-border-radious:50%;
background:
font-size:16px;
text-align:center;
font-family:'MalgunGothic';
background:url(./img/108.gif) center 100% no-repeat;
border:6px solid #fff;
box-shadow: 0 0 16px rgb(0,0,0);
-webkit-box-shadow: 0 0 16px rgb(0,0,0);
-moz-box-shadow: 0 0 16px rgb(0,0,0);
}