[轉載] 用CSS設計圓角文框並解決舊IE的不支援

大部分國人還是使用舊IE系列(IE6~IE8)，尤其是不懂電腦的人更是依賴作業系統提供的預設作業系統，像XP的IE6、IE7，W7的IE8，這些IE都無法支援CSS3，因此有很多CSS特效都無法正常顯現。設計網頁的人常常為這個困惱。

我也試過了一些方式看能不能將IE給模擬CSS出來，網路上的教學挺多的但我試不出效果...
這裡找到一個圓角方法可以參考一下。以下做為簡單轉貼，原處會有更詳細的教學：

[轉載] wowboxBlog


我們將怎樣來處理?

處理圓角的版本是由內置的絕對定位的四個div組成，每個div都有唯一的圓角圖片作CSS Sprite操作。我們將會這樣做：

第一步：創建我們的 Sprite

1、為矩形圓角圖片處理選擇一款編輯器

2、切割並且導出圓角到本地臨時位置 (我們將會在之後用到)。

3、新創建一個文件，將圓角導入到這個新文件中，複製三次，然後旋轉這三個新切片得到另外的三個圓角。

4、合成四個圓角為一張圖片，並用 1px 的紅線 來區分它們。

5、導出合成圖片，sprite 也就大功告成了。

第二步：HTML 原始碼

<blockquote><div class="roundedBox">
<strong>My content in roundedBox Type 1</strong>
<div class="corner topLeft"></div>
<div class="corner topRight"></div>
<div class="corner bottomLeft"></div>
<div class="corner bottomRight"></div>
</div></blockquote>

第三步：CSS 原始碼

.roundedBox {position:relative; padding:17px; margin:10px 0;}
.corner {position:absolute; width:17px; height:17px;}

.topLeft {top:0; left:0; background-position:-1px -1px;}
.topRight {top:0; right:0; background-position:-19px -1px;}
.bottomLeft {bottom:0; left:0; background-position:-1px -19px;}
.bottomRight {bottom:0; right:0; background-position:-19px -19px;}

第四步：CSS內添加一個Type1定義一個新使用

#type1 {background-color:#CCDEDE;}
#type1 {background-color:#CCDEDE;}
#type1 .corner {background-image:url(../images/corners-type1.gif);}

完整碼示範

HTML：
<div class="roundedBox" id="type1"><p>數位看板須具備的優勢條件</p>
<div class="corner topLeft"></div>
<div class="corner topRight"></div>
<div class="corner bottomLeft"></div>
<div class="corner bottomRight"></div>
</div>


CSS：
.roundedBox {position:relative; padding:20px; margin:10px 0;}
.corner {position:absolute; width:11px; height:11px;}
.topLeft {top:0; left:0; background-position:0px 0px;}
.topRight {top:0; right:0; background-position:-11px 0px;}
.bottomLeft {bottom:0; left:0; background-position:0px -11px;}
.bottomRight {bottom:0; right:0; background-position:-11px -11px;}
#type1 {border:1px solid #f4901e;width: 800px;margin:30px auto 0 auto;}
#type1 .corner {background-image:url(images/corners-type1.jpg);}
#type1 .topLeft {top:-1px;left:-1px;}
#type1 .topRight {top:-1px; right:-1px;}
#type1 .bottomLeft {bottom:-1px; left:-1px;}
#type1 .bottomRight {bottom:-1px; right:-1px;}