DIV圓角的製作

2021-04-17 12:35:29 字數 696 閱讀 4092

今天公司的美工辭職了,頁面設計方面的人暫時沒人做,我就接手做了,以前總感覺自己在**製作方面最缺乏能力,但真正做起來也感覺蠻好玩的,主要是配色方面比較差,所以就參考看國外一些做的漂亮**的配色,其中我感覺比較麻煩的就是div圓角的製作,如果乙個div加上圓角效果的話會變好看許多,以下就自己製作div圓角的一些總結。

1、用兩張背景重疊製作圓角div

讓id為bg的做個背景,背景向右對齊,向左延伸。

然後讓id為bg_left的浮動在左邊,寬度bg的。

bg_left的背景就是左邊的圓角向右延伸,但寬度小於bg,bg的背景就是右圓角向左延伸,如不用做透明的話,寬度多少就無所謂了,當然,方向也可以反過來,讓bg_left這個框float在右邊。

2、用製作div圓角4個方向

先把乙個div分為 上中下 3個部分 3個寬度都一樣。

上面做3個div  左邊用乙個圓角的左上角,中間就用線條,右邊用圓角的右上角。

中間就不變

下面也和上面的製作方法一樣,只是圓角的不一樣。

3、用css

無實現圓角框

無實現圓角框

div盒子邊框圓角 CSS之圓角邊框漸變的實現

注 測試瀏覽器版本號 chrome 75.0.3770.80 opera 60.0.3255.109 firefox 67.0 ie 11。之前 css之漸變效果的實現 中有講到邊框顏色漸變,但是只有講最普通的邊框漸變,其作用於圓角邊框漸變時會覆蓋掉圓角的效果,這不是我們預期的,所以我們需要尋找其他...

Fireworks(FW)製作圓角矩形

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

QT 製作視窗圓角

一 設定視窗屬性 setwindowflags qt framelesswindowhint qt windowsystemmenuhint qt windowminmaxbuttonshint setattribute qt wa translucentbackground 二 使用qss新增圓角...