CSS3教學-CSS3新增自訂變數屬性的功能

梅問題-CSS3教學-CSS3新增自訂變數屬性的功能
  CSS3新增許多方便的屬性,像是之前與大家分享的calc,讓在CSS下也能加、減、乘、除,同時支援不同單位的運算,相當的方便,最近CSS3又新增了變數的屬性,讓在CSS中也能像平常在寫SASS或LESS一樣,將重覆的參數,直接用一個名稱代替,比方像常遇到的色碼,當今天將版型設計好後,一旦有一個區塊的色碼要修改時,那就相當的累人,得將用到的色碼,全部給替換掉,但現在有了這變數的功能後,當下回要修改色碼時,只要改一個值,立即全部的套用的色碼,就會變成新的,相當的方便,而目前除了IE外,其它瀏覽器皆支援,也可正常的運作,而這麼好用的變數功能,要如何使用呢?現在就一塊來看看吧!!

Step1
使用方法相當的簡單,只要--變數名稱,後方就是變數的值,這邊梅干分別建立了三組色彩的變數,分別為color1~clor3,這名稱可以任意設定。
梅問題-CSS3教學-CSS3新增自訂變數屬性的功能
Step2
設定好後,當要使用時,只要var()並在括弧間,加入剛所設定的變數名稱,就可將設定好的變數給套用進去啦!
梅問題-CSS3教學-CSS3新增自訂變數屬性的功能
Step3
當套用後,區塊就會變成指定的顏色,同時支援Chrome、Firefox、Safari,至於IE目前依然是不支援的。
梅問題-CSS3教學-CSS3新增自訂變數屬性的功能

相關文章

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

CSS3動畫hover套件,各種常用的互動特效直接套用

CSS3動畫hover套件,各種常用的互動特效直接套用





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。