帶有圓角邊框的層

2021-04-19 07:05:50 字數 634 閱讀 3356

class="b" style="margin-left:**x;width:294px;background:#d3d6dc">

class="b" style="margin-left:2px;width:296px;">

class="b" style="margin-left:1px;width:298px">

"a">

以我的能力,純div+css實現的效果只能做到這樣了。這裡是放置內容的地方,自己看一看**的規律,很容易明白。

**很簡單,a層為放置內容的層,其width值為300,然後向外以2畫素的寬度遞減。最外一層要加上background為個屬性,目的是要將上、下兩線條呈現出來。

這裡實現了3畫素的圓角邊框,b層的數量決定了要實現多少個畫素邊框。建議不要多於3層,最好是2層,即2畫素圓角邊框,或者1層,因為層數越多,圓角的表現就越不圓滑。在firefox  ie6 都通過測試。

class="b" style="margin-left:1px;width:298px">

class="b" style="margin-left:2px;width:296px;">

class="b" style="margin-left:**x;width:294px;background:#d3d6dc">

5 邊框 1 1 1 邊框圓角

border radius 圓角處理時,腦中要形成圓 圓心 橫軸 縱軸的概念,正圓是橢圓的一種特殊情況。如下圖 為了方便表述,我們將四個角標記成1 2 3 4,如2代表右上角,css裡提供了border radius來設定這些角橫縱軸半徑值。支援簡寫模式,具體如下 1 border radius 1...

DIV CSS圓角邊框

簡潔型css圓角矩形 3d圓角矩形 css3實現圓角 firefox 和 safari 實現圓角 1.css3是樣式表 style sheet 語言的最新版本,它的一大優點就是支援圓角 1 css3圓角的優點 減少維護的工作量。檔案的生成 更新 編寫網頁 這些工作都不再需要了。提高網頁效能。由於不必...

border radius 圓角邊框

在css3.0中,又新增了乙個新的屬性border radius,使用border radius這個屬性可以實現圓角邊框的效果。除ie和遨遊外,目前有firefox safari,chrome,opera支援該屬性,其safari,chrome,opera是支援最好的,依照了w3c的標準,僅僅使用b...