標籤: CSS 頁1
[SCSS] 用預處理器來讓你的 CSS 更好維護
CSS 雖然嚴格說不能是程式，但如果在開發的時候加入一些程式的撰寫方式，是可以讓你的 CSS 更好維護的，而所謂的 CSS preprocessor(預處理器)就是幫我們來做這件事情的，寫起來會跟 CSS 有滿大的不同的，但如果習慣後開發速度跟維護都可以比原本的 CSS 更好，如果原本寫 CSS 就有好習慣的話，用起預處理器就會更加如虎添翼。
CSS 的圖層混合效果- mix-blend-mode 與 background-blend-mode
會 photoshop 的朋友應該都知道我們可以利用圖層混合效果讓圖片疊加的時候更多變化，這個以往需要靠繪圖軟體才能完成的效果，現在利用 CSS3 的 mix-blend-mode 也可以做到囉，要使用這個效果前我們需要先讓東西可以疊在一起，可以使用 html 的巢狀結構或是利用 position 來讓東西疊在一起都可以。
CSS3 的 Grid Layout 介紹與使用範例
CSS 的 grid layout 其實滿有趣的，不同於以往的排版方式是一排排完後接著往下繼續安排內容，grid layout 可以讓你把區塊分配完後，直接把內容填入就好了。
CSS3 的濾鏡效果- filter
CSS3 在有了 filter 這個屬性後，我們就可以很簡單地透過設定來替圖片加上濾鏡效果，也就是不用每次都仰賴像 photoshop 這樣的影像繪圖軟體了。
把 CSS 效能優化- will-change
css3 有一個屬性 will-change，是用來增加 CSS 變化時的效能的，但須注意不要過度使用，可以搭配 js 在適當的時刻使用這個屬性。
CSS3 的區塊填滿設定- object-fit 與 object-position
因為圖片大小不一致的關係，以往要做整齊的 UI 排版都不是很方便，要不就是把圖裁切過後存到server，再不就是依據比例計算圖片的長寬後再用 js 調整，而 css3 有了 object-fit 後，就可以直接幫忙處理這個問題。
用 css 讓超出區塊範圍的字變 ...- text-overflow
排版的時候，若文字的長度不一樣，網頁預設會分行，如果後來的行數有的多有的少，版面可能就看起來不整齊，想要讓文字超過區塊長度就自動省落成 ...，我們可以使用 text-overflow 這個屬性。
CSS3 的陰影效果 box-shadow 與 text-shadow
CSS3 開始有了這個屬性後，就不用再仰賴繪圖軟體也能製作陰影效果，在製作 UI 上變得有彈性許多，而陰影效果又分為 box-shadow 和 text-shadow。
修改 html input placeholder 的顏色
placeholder 是 HTML5 後新增的 input 欄位的浮水印效果，可以用來提示使用者輸入的內容與格式之類的，要修改 placeholder 的顏色，要使用 CSS 的 ::placeholder 屬性。
