神马文学网CSS:无图片圆角div（转） - hyde82的专栏 - CSDNBlog
来源：百度文库 编辑：神马文学网 时间：2024/04/30 17:56:23
CSS:無圖片實現圓角邊緣框框
一般都是用小小的圖片放在四周來製作有圓角邊緣的框框， 不過看到一些網站有討論一些不用圖片的圓角框框還蠻有趣的，所以PO出來..一般外加圖片的形式，其實就像作表格一樣，就像這張圖：
再來可以根據 Mountaintop Corners 這篇文章 的切角原裡 應用到語法。
圖一：
這是切出單位像素的情形，看來不怎麼樣，也不夠圓。
圖二：
切的多一點，就更圓了。
圖三：
想要更平滑一點的，可以像這張圖在最離開角心的部份多切出extra pixel，在比較大的框框很適合用
再放大就像這樣。
還有人發明利用Javascript來達到反鋸齒功能，就是角的邊緣顏色會更淡，這樣就幾乎完美的境界了，相當於用圖片所做的圓角了。
在MSN Spaces雖然沒有Javascript ，但還是可以做出像樣的圓角
應用DIV標籤再套用CSS，用背景色屬性當作配色工具，一層一層DIV一直加下去，也能弄出圓角。
當然在此之前，要先align=center 置中對齊才可以。取出其中一層的
的HTML如下：
一些測試範例：(記得!這不是圖片)
Testing Rounded Corners
without images & javascript
by Gene
Testing Rounded Corners
without images & javascript
by Gene
Testing Rounded Corners
without images & javascript
by Gene一個完整的HTML (第3個圖) :
(t1); HEIGHT: 1px; BACKGROUND-COLOR: #666666">(t2=t1+6); HEIGHT: 1px; BACKGROUND-COLOR: #666666">(t3=t2+4); HEIGHT: 1px; BACKGROUND-COLOR: #666666">(c3=t2); HEIGHT: 1px; BACKGROUND-COLOR: #ffffff">(t4=t3+2); HEIGHT: 1px; BACKGROUND-COLOR: #666666">(c4=t3); HEIGHT: 1px; BACKGROUND-COLOR: #ffffff">(t5=t4+2); HEIGHT: 1px; BACKGROUND-COLOR: #666666">(c5=t4); HEIGHT: 1px; BACKGROUND-COLOR: #ffffff">(t6=t5+2); HEIGHT: 1px; BACKGROUND-COLOR: #666666">(c6=t5); HEIGHT: 1px; BACKGROUND-COLOR: #ffffff">(t7=t6+2); HEIGHT: 2px; BACKGROUND-COLOR: #666666">(c7=t6); HEIGHT: 2px; BACKGROUND-COLOR: #ffffff">(t8=t7+2); HEIGHT: 2px; BACKGROUND-COLOR: #666666">(c8=t7); HEIGHT: 2px; BACKGROUND-COLOR: #ffffff">
Testing Rounded Corners
without images
& javascript
by Gene
