這對對於css與法不熟的人算是一大福音拉
在Layout Generators只要用拖拉的方式就可以排出想要的排版樣式

除了1 column 沒有選擇之外
都可以選擇:

• 平行
  
• 巢狀
  

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

In a search of smooth rounded corners是一個教人怎麼把邊框變成圓角的教學

不過如果我們只對結果有興趣的話勒?
直接用下面的程式碼就好了(我自己有稍微改一下..)
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:
}

結果就是:

當然有興趣的可以在In a search of smooth rounded corners下面繼續深造,
有很詳細的教學怎麼條圓角的角度..

ps.特別感謝免費資源網路社群介紹的jing真的很不錯用喔!