티스토리 뷰

프로그래밍/CSS 3.0

border-radius 테두리를 둥글게 하는 스타일

쇠주는참이슬 2012. 3. 20. 10:43
css 3.0에서 가능한 스타일이다.
ie7나 ie8에서 사용하려면  http://dotweb.tistory.com/3  여기를 확인

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Selectors</title>
    
    
    <style>
ul.navi li{
list-style-type:none;
display::block;
width:8em;
height:1.5em;
float:left;
text-align:center;
border-right:1px solid;
background-color: #C63;
}
 
ul.navi li:first-child
{
-webkit-border-top-left-radius:.5em;
-border-top-left-radius:.5em;
-webkit-border-bottom-left-radius:.5em;
-border-bottom-left-radius:.5em;
}
ul.navi li:last-child
{
-webkit-border-top-right-radius:.5em;
-border-top-right-radius:.5em;
-webkit-border-bottom-right-radius:.5em;
-border-bottom-right-radius:.5em;
}
</style>
    
</head>
<body>
<section>
<h1>모바일 OS</h1>
<ul class="navi">
  <li>iOS</li>
  <li>안드로이드</li>
  <li>윈도우(망고)</li>
  <li>바다</li>
</ul>
<br/>
<ul>
  <li>iOS</li>
  <li>안드로이드</li>
  <li>윈도우(망고)</li>
  <li>바다</li>
</ul>
</section>
</body>
</html>

           

'프로그래밍 > CSS 3.0' 카테고리의 다른 글

가상요소 before, after  (0) 2012.03.20
가상요소 - selection  (0) 2012.03.20
target (타겟)  (0) 2012.03.20
nth-child 속성 가상클래스  (0) 2012.03.19
링크 밑줄 표시 없애기 (a:link, a:visited, a:hover, a:active)  (0) 2012.03.19
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함