div css製作圓角矩形

2021-09-30 03:18:05 字數 471 閱讀 6358

學習了用div+css製作圓角矩形,先記下來

圓角它靠1px的高度來拼起來的

比如: 大層div寬度為100px;

圓角開始:上

第一行div,高度為1px; 寬度為94px; 左右兩邊擠開3px,

第二行div,高度為1px; 寬度為96px; 左右兩邊擠開2px,

第三行div,高度為1px; 寬度為98px; 左右兩邊擠開1px, 

內容 圓角開始:下

第一行div,高度為1px; 寬度為98px; 左右兩邊擠開1px,

第二行div,高度為1px; 寬度為96px; 左右兩邊擠開2px,

第三行div,高度為1px; 寬度為94px; 左右兩邊擠開3px,

兩邊的邊距自定,這樣就形成乙個弧形了。

Fireworks(FW)製作圓角矩形

簡單的幾步即可實現這個效果,網上也有 可以直接製作,不過其實fireworks也是很簡單你就可以搞定的。使用圓角矩形作為蒙版,可以輕鬆的把變成圓角形狀。1 開啟乙個 2 使用圓角矩形工具在畫布上畫乙個圓角矩形,在屬性檢查器上,輸入它的大小,大小和上圖的大小一樣。選中上圖就可以知道它的大小。3 調整圓...

div css實現圓角矩形的幾種方法

1.css3實現圓角矩形,相容性有問題 round css3的,很多小的瀏覽器不相容,360之類的.2.拼圖的方法實現圓角矩形 簡潔型css圓角矩形 不過這個在ie7下有問題,下面的會和上面的脫節,所以最好用css hack解決一下.css hack 3,直接吧,最簡單的方式 不過自適應高度的話有些...

div css用邊框實現圓角矩形 多樣式

簡潔型css圓角 方法1 簡潔型css圓角矩形 code1 複製 如下 簡潔型css圓角矩形 方法2 無實現圓角框 code2 複製 如下 無實現圓角框 3d圓角矩形 code 複製 如下 反向css圓角矩形 code 複製 如下 反向css圓角矩形 略帶菱形的css圓角 code 複製 如下 wu...