TShopping

 找回密碼
 註冊
搜索
查看: 325|回復: 0

[分享] CSS 3 圓角 border-radius 介紹

[複製鏈接]
發表於 2014-9-14 13:42:25 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 

目前各家瀏覽器分別開始支援 CSS3,現在 MS 瀏覽器系列只有 IE 9 開始支援 CSS3,所以大家還是趕快升級到 IE 9.0,或者是使用 Google Chrome,FireFox 4.0 吧,以前還沒有 CSS 3 的時候,圓角功能都是靠 jQuery Plugin: Corner,有了 CSS3 大家就不用這麼麻煩了,一行就可以搞定喔。
CSS Border Radius Generator
大家可以參考 CSS Border Radius Generator 這網站,只要輸入4個角所需要的圓角半徑,就會自動產生 CSS 3 的語法喔
  1. /* support Safari, Chrome */
  2. -webkit-border-radius: 5px;
  3. /* support firefox */
  4. -moz-border-radius: 5px;
  5. border-radius: 5px;
複製代碼
也可以個別設定角度 右上圓角:
  1. border-topright-radius: 5px;
  2. -moz-border-topright-radius: 5px;
  3. -webkit-border-topright-radius: 5px;
複製代碼
左上圓角:
  1. border-topleft-radius: 5px;
  2. -moz-border-topleft-radius: 5px;
  3. -webkit-border-topleft-radius: 5px;
複製代碼
右下圓角:
  1. border-bottomright-radius: 5px;
  2. -moz-border-bottomright-radius: 5px;
  3. -webkit-border-bottomright-radius: 5px;
複製代碼
左下圓角:
  1. border-bottomleft-radius: 5px;
  2. -moz-border-bottomleft-radius: 5px;
  3. -webkit-border-bottomleft-radius: 5px;
複製代碼
非常簡單,大家以後不用再自己做圓角的圖,CSS3 一行搞定啦 Ref: css圓角(border-radius)

 

臉書網友討論
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-6 08:29 , Processed in 0.054933 second(s), 22 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表