用CSS實現圓角效果的幾種方法

2021-04-20 05:41:25 字數 901 閱讀 8784

很多的朋友問css圓角的問題,今天休假正好有時間,就寫了如下的幾種方法,基本上是我所能想到的都寫下來了,希望朋友們用得上!呵呵!

第一種方法:

用的float屬性寫的

原理:是用寬高等於2的box定義其magin:-1來蓋住後面的大框的border,然後在box裡寫乙個寬高為1的小box來顯示出突出的點

第三種方法:

用了從上而下一致的box,只是定義了每乙個box的margin:0 2px,這樣改變量值從而達到圓角的效果,這個方法,我寫了三個線來顯示圓角,比上面的兩個要多乙個畫素!

第四種方法: 這種方法和第三種方法是一樣的,不過這裡用了五層來寫圓角,這樣的圓弧度比較大,而且具說是最科學的乙個演算法,來顯示圓角!要不然google怎麼也會用這麼大的圓角呢,呵呵!

以下**在ie7和firefox下測試都沒有問題!,呵呵

歡迎朋友們對css進行交流指證!

複製內容到剪貼簿

**:

第一種方法:

用的float屬性寫的

原理:是用寬高等於2的box定義其magin:-1來蓋住後面的大框的border,然後在box裡寫乙個寬高為1的小box來顯示出突出的點

第二種方法:

第三種方法:

用了從上而下一致的box,只是定義了每乙個box的margin:0 2px,這樣改變量值從而達到圓角的效果,這個方法,我寫了三個線來顯示圓角,比上面的兩個要多乙個畫素!

第四種方法:

這種方法和第三種方法是一樣的,不過這裡用了五層來寫圓角,這樣的圓弧度比較大,而且具說是最科學的乙個演算法,來顯示圓角!要不然google怎麼也會用這麼大的圓角呢,呵呵!

用js實現css3效果的圓角方法

找在ie下實現css3效果的圓角時找到的乙個例項,沒有測試,不知道使用起來怎麼樣,有興趣的朋友可以自己試一下 複製 如下 wgxvrog 程式設計客棧1 dtd xhtml1 transitional.dtd 演示 lhgcalendar32423 程式設計客棧 32423 www.cppcns.c...

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

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

用css實現圓角

圓角示例 title style type text css headerrcbox rch headerrcbox rch headerrcbox rch1 headerrcbox rch2 headerrcbox rch3 headerrcbox rch4 headerrcbox rch5 he...