# [CSS]輕鬆用css排版跟實現圓角框

- URL: https://justfly.idv.tw/css%e8%bc%95%e9%ac%86%e7%94%a8css%e6%8e%92%e7%89%88%e8%b7%9f%e5%af%a6%e7%8f%be%e5%9c%93%e8%a7%92%e6%a1%86/
- 日期: 2009-06-10
- 分類: WEB&RIA
- 標籤: css, layout, web

這對對於css與法不熟的人算是一大福音拉

在[Layout Generators](http://www.pagecolumn.com/)只要用拖拉的方式就可以排出想要的排版樣式

http://farm4.static.flickr.com/3355/3612772600_fc934fae22.jpg

除了1 column 沒有選擇之外

都可以選擇:

- 平行

http://farm3.static.flickr.com/2435/3612774700_ab945fcea0.jpg

- 巢狀

http://farm4.static.flickr.com/3054/3612775968_2e109375c5.jpg

在左邊拖拉後再有邊得到我們的css碼….

[In a search of smooth rounded corners](http://www.pagecolumn.com/webparts/rounded_corners.htm)是一個教人怎麼把邊框變成圓角的教學

http://farm4.static.flickr.com/3298/3611980577_2f311e886d.jpg

不過如果我們只對結果有興趣的話勒?

直接用下面的程式碼就好了(我自己有稍微改一下..)

HTML:

```
just a 圓角框 test
```

CSS:

```
.r1, .r2,.r3,.r4,.r5 {
    display: block;
    overflow: hidden; 
}
.r1 { 
    margin: 0 5px;
    height: 1px;
    background:#999;
}
.r2 { 
    margin: 0 2px;
    height: 1px;
    background:#999;
}
.r3 { 
    margin: 0 1px;
    height: 1px;
    background:#999;
}        
.r4 {
    margin: 0 1px;
    height: 1px;
    background:#999;
}
.r5 {
    margin: 0 1px;
    height: 1px;
    background:#999;
}
div.maru{
    background:#999;
	line-height:normal;
	padding:5px;
	color:#003:
}
```

結果就是:

**********

just a 圓角框 test

**********

當然有興趣的可以在[In a search of smooth rounded corners](http://www.pagecolumn.com/webparts/rounded_corners.htm)下面繼續深造,

有很詳細的教學怎麼條圓角的角度..

ps.特別感謝[免費資源網路社群](http://www.freegroup.org/2009/06/free-software-jing/)介紹的[jing](http://www.jingproject.com/)真的很不錯用喔!