CSS:无图片圆角div（转） - hyde82的专栏 - CSDNBlog
来源：百度文库 编辑：神马文学网 时间：2024/10/02 06:35:00
CSS:無圖片實現圓角邊緣框框
一般都是用小小的圖片放在四周來製作有圓角邊緣的框框， 不過看到一些網站有討論一些不用圖片的圓角框框還蠻有趣的，所以PO出來..
一般外加圖片的形式，其實就像作表格一樣，就像這張圖：
再來可以根據 Mountaintop Corners 這篇文章 的切角原裡 應用到語法。
圖一：
圖二：
圖三：
還有人發明利用Javascript來達到反鋸齒功能，就是角的邊緣顏色會更淡，這樣就幾乎完美的境界了，相當於用圖片所做的圓角了。
在MSN Spaces雖然沒有Javascript ，但還是可以做出像樣的圓角
應用DIV標籤再套用CSS，用背景色屬性當作配色工具，一層一層DIV一直加下去，也能弄出圓角。
當然在此之前，要先align=center 置中對齊才可以。
取出其中一層的
一般都是用小小的圖片放在四周來製作有圓角邊緣的框框， 不過看到一些網站有討論一些不用圖片的圓角框框還蠻有趣的，所以PO出來..
一般外加圖片的形式，其實就像作表格一樣，就像這張圖：
再來可以根據 Mountaintop Corners 這篇文章 的切角原裡 應用到語法。
圖一：
圖二：
圖三：
還有人發明利用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個圖) :
Testing Rounded Corners
without images
& javascript
by Gene
一些測試範例：(記得!這不是圖片)
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個圖) :
Testing Rounded Corners
without images
& javascript
by Gene