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

Posted on 由
LINEで送る
[`evernote` not found]

這對對於css與法不熟的人算是一大福音拉
在Layout Generators只要用拖拉的方式就可以排出想要的排版樣式
2009-06-10_1029
除了1 column 沒有選擇之外
都可以選擇:

  • 平行
    2009-06-10_1030
  • 巢狀
    2009-06-10_1031

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

In a search of smooth rounded corners是一個教人怎麼把邊框變成圓角的教學
2009-06-10_1039
不過如果我們只對結果有興趣的話勒?
直接用下面的程式碼就好了(我自己有稍微改一下..)
HTML:

<div>
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
<b class="r5"></b>        
<div class="maru">just a 圓角框 test</div>
<b class="r5"></b>
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</div>

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下面繼續深造,
有很詳細的教學怎麼條圓角的角度..

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

4 則迴響於《[CSS]輕鬆用css排版跟實現圓角框》

回應已關閉。