CSS3에 아주 간편하고 유용하게 쓸 수 있는 많은 기능들이 추가되었지만, IE6,7,8 에서는 먹히질 않는다 ㅠㅠ
이를 해결하기 위한 방법을 소개한다.
참고사이트 : http://css3pie.com/
index.html ===========================================================
<!DOCTYPE html>
<html>
<head>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/PIE_IE678.js"></script>
<![endif]-->
<!--[if IE 9]>
<script type="text/javascript" src="js/PIE_IE9.js"></script>
<![endif]-->
<style>
.boxWrap{position:relative;width:150px;height:200px;border:1px solid #000}
.boxWrap .boxText{position:relative;width:100%;text-align:center;font-size:15px;margin-top:10px;}
.boxWrap .boxCircle{behavior:url(js/PIE.htc);position:relative;margin:auto;width:100px;height:100px;border-radius:50px;-webkit-border-radius:50px;-moz-border-radius:50px;top:10px;}
.boxWrap .boxLine{position:absolute;bottom:0;width:100%;height:40px;border-top:1px solid #000}
</style>
</head>
<body>
<div class="boxWrap">
<div class="boxText">Test Text</div>
<div class="boxCircle" style="background:#2EB82E;"></div>
<div class="boxLine"></div>
</div>
</body>
</html>
빨간색 부분만 경로를 잘 맞춰서 넣어주면 된다.
PIE.js 파일을 먼저 불러오고, css3 를 적용해야 할 요소의 css에 behavior:url(js/PIE.htc); 를 포함해준다.
border-radius, box-shadow, gradient, border-image 등등 사용 가능하다.
PIE-2.0beta1.zip'CSS' 카테고리의 다른 글
| CSS 커서 속성 모음 (0) | 2013.05.31 |
|---|---|
| web font (0) | 2013.05.14 |
| box-shadow 와 text-shadow 의 사용 (0) | 2013.05.07 |
| CSS3 rgba / opacity 의 사용 (2) | 2013.05.07 |
| 텍스트가 길어서 뚫고나올때 처리법 (0) | 2013.04.23 |