我在這裡介紹的是實現圓角矩形邊框的方法。用代碼說明問題
| 代碼如下 | 複製代碼 |
| ：<html><head><style>#a{border-left:1px #333 solid;border-right:1px #333 solid;width:300px;height:500px;}.b{height:1px;overflow:hidden;border-left:1px #333 solid;border-right:1px #333 solid;}</style></head><body><div><div class="b" style="margin-left:3px;width:294px;background:#333"></div><div class="b" style="margin-left:2px;width:296px;"></div><div class="b" style="margin-left:1px;width:298px"></div><div id="a">以我的能力，純DIV+CSS實現的效果只能做到這樣了。這裡是放置內容的地方，自己看一看代碼的規律，很容易明白。<br/>代碼很簡單，a層為放置內容的層，其width值為300，然後向外以2像素的寬度遞減。最外一層要加上background為個屬性，目的是要將上、下兩線條呈現出來。<br/>這裡實現了3像素的圓角邊框，b層的數量決定了要實現多少個像素邊框。建議不要多於3層，最好是2層，即2像素圓角邊框，或者1層，因為層數越多，圓角的表現就越不圓滑。在firefox IE6 都通過測試。</div><div class="b" style="margin-left:1px;width:298px"></div><div class="b" style="margin-left:2px;width:296px;"></div><div class="b" style="margin-left:3px;width:294px;background:#333"></div></div></body></html> | |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
