可點選QR code
ARTICLE
1
禁止轉譯 JavaScript 和 CSS│改善網站速度
在本站先前介紹過的Page Speed網站速度與SEO的重要關係當中，我們針對了測速工具 Page Speed Tools 給我們的最佳化圖片建議進行了改善說明，檢測網站當中其實包含了許多項目，在改善完圖片後，本次將為大家介紹"禁止轉譯 JavaScript 和 CSS"的建議調整方向。
禁止轉譯 JavaScript 和 CSS，其實指的是在網站畫面呈現的特效工作程式區塊，在行動裝置發展之前，大多數網站只對應桌上型電腦裝置，而多數電腦裝置包含著碩大的螢幕畫面與穩固快速的實體網路線路，較不像行動裝置受小螢幕與無線網路的限制，因此在發展的歷史中，越精美越多樣化的網站所使用的JavaScript 和 CSS 特效程式就顯得更加複雜與龐大，原本是替網站美化與提升功能的效果卻因為行動裝置的限制載入與普及，漸漸成了網站的弊端。
因而從始至今，在數以萬計的眾多站台中，衍伸出了改善JavaScript 和 CSS 載入限制的"部分快速轉譯技術"，能夠在保留站台原始效果的情況下，調整網站在讀取瀏覽時的優先存取項目與技術，就是改善禁止轉譯 JavaScript 和 CSS的一種優化方式。
已往的網頁可能需要多次禁止轉譯來回行程以及多項外部資源載入才能完成。但在部分快速轉譯技術優化後的網頁則能夠減少禁止轉譯來回行程的次數以及降低外部資源載入的容量，所需要的來回行程與外部載入位元組數越少，則網頁轉譯速度越快。
作為網頁設計師肯定對製圖軟體Photoshop不陌生，
而現在可以直接用CSS呈現囉！
雖然目前的瀏覽器支援度很有限，
除了Opera與IE無法支援以外，Chrome和Firefox則可以不靠前綴即可呈現 。
CSS的mix-blend-mode屬性就跟Photoshop的圖層混合模式一樣，雖然不如Photoshop那麼多，但也高達十六種效果。
就讓我們看以下範例，可以比較各個色彩模式的呈現：
mix-blend-mode: normal 一般
預設值，沒有被混合。
See the Pen <a href='https://codepen.io/bok770/pen/zjZyKO/' _fcksavedurl='https://codepen.io/bok770/pen/zjZyKO/'>zjZyKO</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.
mix-blend-mode: multiply 色彩增值
See the Pen <a href='https://codepen.io/bok770/pen/JvWwbY/' _fcksavedurl='https://codepen.io/bok770/pen/JvWwbY/'>JvWwbY</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.
mix-blend-mode: screen 濾色
See the Pen <a href='https://codepen.io/bok770/pen/ervbBa/' _fcksavedurl='https://codepen.io/bok770/pen/ervbBa/'>ervbBa</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.
mix-blend-mode: overlay 覆蓋
See the Pen <a href='https://codepen.io/bok770/pen/vjxvgx/' _fcksavedurl='https://codepen.io/bok770/pen/vjxvgx/'>vjxvgx</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.
mix-blend-mode: darken 變暗
See the Pen <a href='https://codepen.io/bok770/pen/QrpzdV/' _fcksavedurl='https://codepen.io/bok770/pen/QrpzdV/'>QrpzdV</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.
mix-blend-mode: lighten 變亮
See the Pen <a href='https://codepen.io/bok770/pen/odZJZz/' _fcksavedurl='https://codepen.io/bok770/pen/odZJZz/'>odZJZz</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.
mix-blend-mode: color-dodge 加亮顏色（減淡）
See the Pen <a href='https://codepen.io/bok770/pen/ELWGma/' _fcksavedurl='https://codepen.io/bok770/pen/ELWGma/'>ELWGma</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.
mix-blend-mode: color-burn 加深顏色
See the Pen <a href='https://codepen.io/bok770/pen/wjJRej/' _fcksavedurl='https://codepen.io/bok770/pen/wjJRej/' _fcksavedurl='https://codepen.io/bok770/pen/wjJRej/'>wjJRej</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.
mix-blend-mode: hard-light 實光
See the Pen <a href='https://codepen.io/bok770/pen/JvWwyX/' _fcksavedurl='https://codepen.io/bok770/pen/JvWwyX/'>JvWwyX</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.
mix-blend-mode: soft-light 柔光
See the Pen <a href='https://codepen.io/bok770/pen/bMqOrj/' _fcksavedurl='https://codepen.io/bok770/pen/bMqOrj/'>bMqOrj</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.
mix-blend-mode: difference 差異化
See the Pen <a href='https://codepen.io/bok770/pen/aGJPLv/' _fcksavedurl='https://codepen.io/bok770/pen/aGJPLv/'>aGJPLv</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.
mix-blend-mode: exclusion 排除
See the Pen <a href='https://codepen.io/bok770/pen/WJpLZa/' _fcksavedurl='https://codepen.io/bok770/pen/WJpLZa/'>WJpLZa</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.
mix-blend-mode: hue 色相
See the Pen <a href='https://codepen.io/bok770/pen/ELWGbj/' _fcksavedurl='https://codepen.io/bok770/pen/ELWGbj/'>ELWGbj</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.
mix-blend-mode: saturation 飽和度
See the Pen <a href='https://codepen.io/bok770/pen/GdWPOO/' _fcksavedurl='https://codepen.io/bok770/pen/GdWPOO/'>GdWPOO</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.
mix-blend-mode: color 顏色
See the Pen <a href='https://codepen.io/bok770/pen/rvyopN/' _fcksavedurl='https://codepen.io/bok770/pen/rvyopN/' _fcksavedurl='https://codepen.io/bok770/pen/rvyopN/' _fcksavedurl='https://codepen.io/bok770/pen/rvyopN/'>rvyopN</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.
mix-blend-mode: luminosity 明度
See the Pen <a href='https://codepen.io/bok770/pen/LmWMeb/' _fcksavedurl='https://codepen.io/bok770/pen/LmWMeb/' _fcksavedurl='https://codepen.io/bok770/pen/LmWMeb/' _fcksavedurl='https://codepen.io/bok770/pen/LmWMeb/'>LmWMeb</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.
ARTICLE
3
CSS的框線樣式：border
CSS的border屬性可以設定區塊的邊框，預設值為none，常見的有以下：
border-style：邊框樣式
border-top: 上框線
border-bottom: 下框線
border-left: 左框線
border-right: 右框線
border: 四邊框線
border-width: 邊線的寬度
border-color：邊線的顏色
範例：
border-top:1px solid #000
border-bottom:4px dotted #009FCC
border-left:2px dashed #FF8800
border-right:1px solid #7A0099
我們可以分別為四邊設定不同的數值，如果說四邊的屬性都一樣時，
可以直接寫border統一描述，而不用四邊都各寫一次。
範例：
border: 1px solid #4d4d4d
border-width 屬性是用來設定邊框的寬度。
可用的值除了數字以外，也可以用 thin (薄)、medium (中等)、thick (厚)。
範例：
border-width: thin
border-style則可以設定邊框的樣式
設定值如下：
border-style:solid 實線
border-style:dotted 點線
border-style:dashed 虛線
border-style:double 雙線
border-style:groove 凹線
border-style:ridge 凸線
border-style:inset 嵌入線
border-style:outset 浮出線
範例：
See the Pen <a href='https://codepen.io/bok770/pen/RyrgRe/' _fcksavedurl='https://codepen.io/bok770/pen/RyrgRe/' _fcksavedurl='https://codepen.io/bok770/pen/RyrgRe/'>RyrgRe</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.
ARTICLE
4
Google網頁分析工具-行動裝置相容性測試
Google 在 2018 年新年一月份就發佈了 Mobile-friendly websites 這項消息，從訊息的開頭就提到了："行動科技正在改變世界。如果您尚未建立適合透過行動裝置瀏覽的網站，我們極力推薦您這麼做，因為大部分造訪您網站的人很可能都是使用行動裝置。"，由此開宗明義的讓所有人能明白，網站經營的趨勢已經正在行動化! Google 考量了除了近年建置的新網站之外，以往至今，大多數網頁站台都是從電腦版網站為基礎建構，面對來勢洶洶的行動化，如果您不知道自己的網站是否適合透過行動裝置瀏覽，Google 也貼心的推出了"行動裝置相容性測試"提供以往內容的檢測與改善建議。
行動裝置相容性測試這項服務有效的提供了客觀與專業的檢測和建議，不論對於有經營一定時日的傳統網站還是即將上線的新網站都提供了實質的剖析。
在檢測中主軸便以簡單明確的顯示告知當前的網站是否合適透過行動裝置瀏覽
從不適合透過行動裝置的分析可以大約瞭解，行動裝置的設計主要針對了：文字大小、閱讀方便性、內容寬度是否超出螢幕顯示範圍、設定檢視點、可點選的元素之間距離是否太近。這幾個項目進行審核，並提供改善建議。
根據建議修正的部分，將網站調整至正確的方向，便能有效改善頁面在行動裝至上的友善使用性，在進行改善檢測後，Google 也提供優先索引的提交功能，讓您的網站在行動裝置優化後能夠有效馬上受到搜尋引擎的重視與收納。
ARTICLE
5
行動網路載入速度測試-Test My Site With Google
本站先前也介紹過PageSpeed網站速度與SEO的重要關係，主要是由 Google 針對網站體驗的載入進行友善評比、測試與建議，從行動裝置日新月異的發展，瀏覽網站的裝置比例由原來單一的桌上型裝置改變成行動裝置成為主流，身為搜尋引擎龍頭廠商及Chrome瀏覽器的高市佔率，Google 更加重視網站在行動裝置上的體驗，因此在 PageSpeed 網站體驗分析之後，更推出了只針對行動裝的體驗測試的專屬功能 Test My Site With Google ：https://testmysite.withgoogle.com/intl/zh-tw，由這項功能把網站發展帶領至行動裝置載入速度為優先考量的趨勢。
Test My Site With Google 這項行動裝的體驗測試的專屬功能與 PageSpeed 網站體驗分析同樣都會針對網站的基本元素 CSS\HTML\JavaScript 是否壓縮進行檢測。
除了基礎的元素之外，Test My Site With Google 體驗測試和與 PageSpeed網站體驗分析最大的差異在於，Google考量了現實環境中行動網路技術的發展(一直到2020年，全球各地70%的行動網路只到3G的執行速度)，因此Test My Site With Google 體驗測試加入了標準行動網路(3G)的連線測試。
在包含了行動連線之外，更考量了行動裝置視窗大小不一的問題，真對網站內容在行動視窗上呈現的友善、易讀性進行瞭解、評估。
還加入了其他相似網站的相關評比動作，讓網站的檢測不再只是閉門造車，讓網站的成長格局更加廣闊。
比較得特別的地方在於，此項測試功能將分析的成果分為簡易的連線速度測量、客戶流失率原因，和需要經由"信箱"取得的詳細報告。
透過信箱取得的詳細報告內容包含了：看來沒問題、建議修正、應該修正 評比與建議。網站便能針對這些行動體驗項目更加精進。
ARTICLE
6
CSS的滑鼠游標屬性：cursor
CSS的cursor屬性可以改變滑鼠游標的形狀，
當滑鼠移過去時，就會顯示自設定的形狀。
共有以下這些屬性值
Crosshair、pointer、text、move、wait、help、progress、
not-allowed、no-drop、no-vertical-text、all-scroll、col-resize、
row-resize、e-resize、ne-resize、n-resize、nw-resize、w-resize、
sw-resize、s-resize、se-resize
範例一覽表，將滑鼠移上即可顯示該游標的圖案：
See the Pen <a href='https://codepen.io/bok770/pen/GxbGXW/' _fcksavedurl='https://codepen.io/bok770/pen/GxbGXW/'>GxbGXW</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.
也可以自設定圖片作為鼠標，寫法：
{ cursor: url(圖片的檔案路徑); }
ARTICLE
7
HTTP/2 是什麼
HTTP/2是什麼?在網站伺服器與瀏覽器相互連結工作之間，使用了一項全球資訊網基礎的 HTTP(超文本傳輸協定) 通訊協定，其中最為廣泛應用的版本為1999年發布的 HTTP/1.1，也是網站伺服器與瀏覽器配合使用最久的協定版本，其中相隔經歷了16個年頭，在2015年時才又正式的發佈了最新的協定版本，那就是 HTTP/2（超文字傳輸協定第2版)，也是正式的準備取代 HTTP 1.1成為現今 HTTP 的實現標準。
相隔了十六年後的更新，HTTP/2 的釋出帶來了網站瀏覽的全新體驗，不僅讓網站瀏覽速度增加，也提供了更安全的連線資訊，同時更兼容了 HTTP/1.1 原有的GET/POST 操作、HTTP Status Code 和各種 HTTP Headers 都沒有改變，因此在不需要修改 HTML/CSS/JavaScript 網頁和你的後端程式伺服器端的情況下，只需要將網站伺服器軟體進行更新並設定，使用者使用支援 HTTP/2 的瀏覽器，就可以體驗這項優化的通訊協定。
HTTP/2 與 HTTP/1.1 相差別的幾項工作模式，其中包含了：
1.HTTP/2 協定建置在 HTTPS 安全連線之上，因此在更新 HTTP/2之前，網站必須要擁有 TLS/SSL 安全性憑證來保障安全連線。
2.在減少多個連線工作次數的情況下，瀏覽器只需單一網路連線就可以與網站伺服器進行連接。
3.由單一網路連線時達成同時傳輸多個 HTTP Request 和 Response，並擴充增加可以同時請求發送 CSS/JS/Images 等等資源。
4.優先權設計(Prioritization)，伺服器可以決定例如 CSS 或 JavaScript 檔案，哪些要優先傳送。
5.Header 壓縮，HTTP/2 處理了絕大部份重複的 Headers ，並在傳送前進型壓縮，有效減少了過多重複的資訊也縮短了冗長得傳輸過程。
6.HTTP/2 使用單一Binary 二進位的封包結構設計，對伺服器和瀏覽器來說，可以更快的解析傳輸資料。
7.伺服器主動推送資源(Server Push)，允許伺服器除了 HTML 之外，連同需要的 CSS/JavaScript/Images 檔案，主動推到瀏覽器的快取之中。
透過以上的調整與擴充功能，讓伺服器與瀏覽器在相互連結工作時能省下更多傳輸時間，也減少了原本複雜的資訊，並兼顧了網站傳輸安全，是項多方改善的優化協定，而應用上特別需注意部分為TLS/SSL 安全性憑證，網站原先使用 HTTP 改成 HTTPS 的這個過程需要較為注意，站內連結與需要連同更換。
ARTICLE
8
Google AMP網頁該調整什麼方向?
本站先前介紹過，什麼是AMP網頁?主要是由 Google 貼近行動裝置(手機或平板)瀏覽時，所特別釋出的專案，透過規定的網頁格式與對應的內容，可以另外收錄對應的快取伺服器，達到比傳統搜尋快數倍，流量卻能節省，同時也會優先出現於推薦區塊的優化技術。
一般網站要如何加入這項優化方案呢?可以根據 Google 所釋出的 AMP HTML 對應格式來進行修改設定，當中幾項例子，如HTML標籤可以在AMP HTML中保持不變。但某些標籤具有相同的自定義標籤，其他標籤完全禁止使用，如：
IMG 替換為 amp-img
視頻 替換為 amp-video
音頻 替換為 amp-audio
IFRAME 替換為 amp-iframe
PARAM 禁止
嵌入 禁止
等....
網頁製作人員透過使用AMP格式，將內容調整後，可以使AMP文件中的內容被抓取收錄（受robots.txt限制），便能另外收錄在Google對應的快取伺服器中。
在設定後若未能完全確認格式是否正確的情況下，Google也貼心的提供了對用 AMP HTML的檢測器：AMP測試
另外提醒，在 Google AMP 剛推廣的情況下，有使用 adsense 廣告的網站，皆面臨到一項較大的影響，就是因為網站 AMP 設定後便能另外收錄在Google對應的快取伺服器中，因此相關訪客流量將是紀錄在網址後方有加上「/amp」的伺服器上，將不會算計在原本網站上的流量，關於這個部分將會大大影響 adsense 廣告收錄效益，因此 Google 也針對此部份推出了改善方案，詳請可以參考如何建立 AMP 相容廣告單元資訊。
ARTICLE
9
設定圖片透明度－CSS的opacity 屬性
在網頁設計上對圖片進行透明度處理是相當常見的，
而定義透明效果的屬性是opacity，能夠設定的數值從 0.0 到 1.0。
數值越小，透明度越高。
而IE8及更早的版本使用filter:alpha(opacity=x)。
x 的值從 0 到 100。
數值越小，越透明。
讓我們看以下範例，左為原圖，右圖將透明度調高：
See the Pen &lt;a href='https://codepen.io/bok770/pen/NYzNry/' _fcksavedurl='https://codepen.io/bok770/pen/NYzNry/'&gt;NYzNry&lt;/a&gt; by Ya (&lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&gt;@bok770&lt;/a&gt;) on &lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&gt;CodePen&lt;/a&gt;.
常見的圖片透明度切換效果，
用hover即可做到，
只要將鼠標移到圖片上即可改變透明度。
範例：
See the Pen &amp;amp;lt;a href='https://codepen.io/bok770/pen/xWzVwv/' _fcksavedurl='https://codepen.io/bok770/pen/xWzVwv/'&amp;amp;gt;xWzVwv&amp;amp;lt;/a&amp;amp;gt; by Ya (&amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;gt;@bok770&amp;amp;lt;/a&amp;amp;gt;) on &amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;gt;CodePen&amp;amp;lt;/a&amp;amp;gt;.
ARTICLE
10
替網頁文字加上底線－CSS的text-decoration屬性
在網頁的文字內容上有時需要劃線以標示重點等等，
可以使用html的 < u > 標籤，
或是CSS的text-decoration屬性。
不過用CSS表現的變化會比較多，
以下介紹此兩種範例：
html的< u >標籤
See the Pen &amp;amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/bvMvbZ/' _fcksavedurl='https://codepen.io/bok770/pen/bvMvbZ/'&amp;amp;amp;amp;gt;bvMvbZ&amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;gt;.
CSS的text-decoration
常見的設定值有
none：無底線，為預設值
underline：文字下的底線。
overline：文字上的線。
line-through：穿過文字的線，可以看做是刪除線。
範例：
See the Pen &amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/MVGVgw/' _fcksavedurl='https://codepen.io/bok770/pen/MVGVgw/' _fcksavedurl='https://codepen.io/bok770/pen/MVGVgw/'&amp;amp;amp;gt;MVGVgw&amp;amp;amp;lt;/a&amp;amp;amp;gt; by Ya (&amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;gt;@bok770&amp;amp;amp;lt;/a&amp;amp;amp;gt;) on &amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;gt;CodePen&amp;amp;amp;lt;/a&amp;amp;amp;gt;.&amp;amp;amp;lt;br&amp;amp;amp;gt;
若是覺得底線與文字過於接近，
則是可以使用border-bottom或是box-shadow，
搭配padding-bottom來設定文字與底線的距離。
在底線的呈現上兩者並無太大區別。
兩者的差異在於box-shadow生成的底線不會對排版造成影響，
而border-bottom則因為會增加文字的尺寸，可能會影響元素的排列。
範例：
See the Pen <a href='https://codepen.io/bok770/pen/JLvLGy/' _fcksavedurl='https://codepen.io/bok770/pen/JLvLGy/' _fcksavedurl='https://codepen.io/bok770/pen/JLvLGy/'>JLvLGy</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.
