박스의 모서리를 둥글게 해주는 border-radius 속성
드롭다운 메뉴버튼 만들기
border-radius 속성으로 버튼을 이쁘게 만들어 보자
아래는 스타일 시트 입니다
<style>
div, ul, li{margin:0; padding:0}
body{font-size:12px; font-family:"맑은고딕", arial}
ul{list-style:none}
a{color:#000; text-decoration:none;}
#dk{
width:640px; height:60px; margin:auto; margin-top:50px; background:#ddd;
}
#dk>ul{
width:620px; height:30px; padding:20px 0 0 20px;
}
#dk>ul>li{float:left; width:110px; height:30px; text-align:center; margin-right:5px; position:relative; top:-30;border:1px solid gray; border-radius:0.5em;
}
#dk>ul>li>a{
display:block;width:100%; height:100%; font-famliy:'Malgun Gothic','맑은고딕','sans-serif; font-size:13px/16px; font-weight:bold; color:purple; text-align:center; background:#7093DB; text-decoration:none;
border:2px solid gray; border-radius:2em;}
#dk>ul>li>a:hover{
color:orange; background:blue; text-decoration:none; border:1px solid gray; border-radius:0.5em;
}
#dk ul ul{display:none;}
#dk>ul>li:hover ul{
display:block; width:110px; height:25px; text-align:center; position:absolute; left:0px; top:30px;
}
#dk li li{display:block; width:110px; height:25px; background-color:lime; text-align:center; border:1px solid gray; border-radius:0.5em;
}
#dk li li a{
display:block; width:100%; height:100%; font-weight:bold 12px/25px; font-famliy:'Malgun Gothic','맑은고딕','sans-serif;font-size:13px; text-align:center;
}
#dk li li a:hover{
color:red; background:none; valign:middle;
}
#clre {display:clerfix;}
</style>
아래는 결과 입니다.
메뉴 버튼을 클릭하면 실제로 드롭다운이 됩니다.
결과에서 보신것 처럼 버튼의 테두리를 두르고 있는 선의 모서리 부분이 라운드가 진것을 볼수 있습니다.
border-radius 속성의 값으로
border-bottom-left-radius:00px;또는00 em;이값은 박스의 하단부 왼쪽에 라운드를 주게 됩니다.
border-bottom-right-radius:00px;또는00 em;하단부의 오른 쪽 에 값을 주게 되겠죠
border-radius:0px 0px 0px 0px; 이렇게 네 모서리에 값을 한꺼번에 따로 따로 줄수도 있습니다.
상단의 왼쪽 모서리 부터 상단의 오른쪽 하단의 오른쪽 그리고 하단의 왼쪽 순서로 값이 전달 됩니다.
border-radius:1px 2px; 이렇게 주게 되면 상단부의 왼쪽에 1픽셀 하단부의 오른쪽에 2픽셀의 값을 주게 됩니다.
border-radius:2px; 이렇게 주게 되면 네 모서리 전체에 똑 같이 2픽셀의 값을 주게 됩니다.
border-radius속성으로 원형 버튼 만들기
만약 메뉴 버튼을 동그랗게 만들고 싶을경우엔
border-radius:50%;이렇게 50%의 값을 주게 되면 박스가 동그란 원이 됩니다.
아래는 결과 입니다.
제블로그는 다음 웹앱에 최적화되어 있어 네이버 창에서 열었을때 결과 값이 상당히 다르게 나타 납니다.
아래의 예문들은 네이버에 최적화 한 예문들 입니다.