1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. CSS
  6. »
  7. CSS教學-「CSS3圓角框」 線上語法產生器

CSS教學-「CSS3圓角框」 線上語法產生器

2012/02/02

梅問題-CSS教學-css3圓角框線上語法產生器

  隨著Html5與CSS3吵的沸沸洋洋的,到至今還沒有個Final的版本,就連瀏覽器各家支援也不一,且IE的支援度較差,但說實真的CSS3中的許多語法,到是帶來設計上蠻多便利的地方,例如:圓角框、漸層背景,就可減少作圖與Div的包來包去,省事不少且還可隨時更換圓角大小與背景的漸層顏色,所以有在收看梅問題的朋友,應該有發現到,梅問題最近做了點小改版,大至上看起來與之前沒啥差別,最大的差異則在於此次梅干採用了Html5的架構與CSS3,像是漸層背與圓角框,但看似簡單的圓角框,語法也是落落長,所以梅干今天來分享個好網站,直接透過網站立,即就可產生自已所要的圓角框的語法囉!


CSS3圓角框產生器:

網址:http://border-radius.com/
語法:CSS3

Step1
進入網站後,會看到四周有四個輸入框。
梅問題-CSS教學-css3圓角框線上語法產生器


Step2
直接輸入圓角的大小。
梅問題-CSS教學-css3圓角框線上語法產生器


Step3
而CSS3有趣的地方就在於,除了圓角還可四邊的圓角弧度都不同,當產生出來後,直接複製中間的語法,貼到網頁中就可使用了。
梅問題-CSS教學-css3圓角框線上語法產生器


Step4
以下是在各瀏覽器的呈現狀況。

IE 9.0
梅問題-CSS教學-css3圓角框線上語法產生器

Chrome 16.0
梅問題-CSS教學-css3圓角框線上語法產生器

Firefox 6.0
梅問題-CSS教學-css3圓角框線上語法產生器

Safari 5.0
梅問題-CSS教學-css3圓角框線上語法產生器


  哈~是不是很方便呢?雖然說有些瀏覽器,對於CSS3的支援度較差,但至於圓角框的部分,目前的瀏覽器皆可支援,所以只能挑選較保守的幾個語法來使用,而想用CSS3圓角框的朋友,不坊也可多加利用這網站。


[範例頁面]