CSS LOGO 描邊陰影字工法(替換原 filter: drop-shadow)用法，解決行動瀏覽異常消電原問題(觸發 GPU 合成層)

之前寫過一篇【用CSS做出來一個文字漸層+文字白框+文字陰影的LOGO區塊，CSS最終解法並符合無障礙】的工作心得，但經過多次實際驗證，filter: drop-shadow方法雖然較為美觀，但在行動瀏覽或是平板，容易觸發 GPU 合成層，導致版面異常(畫面上下空白)，裝置發燙等耗電等問題，因此經改良後，改用CSS LOGO 描邊陰影字工法能維持與原本 filter: drop-shadow相同的效果，且手機平版不會異常，方法如下：

以下是使用-webkit-text-stroke/text-shadow做出來的文字效果，幾乎能90%還原PSD設計效果

文字的PHP常數增加data-storke設定

define('_THEME_LOGO_02','<div class="logo_01_box" aria-hidden="true" tabindex="-1" data-storke="桃園市">桃園市</div><div class="logo_02_box" aria-hidden="true" tabindex="-1" data-storke="快樂">快樂</div><div class="logo_03_box" aria-hidden="true" tabindex="-1" data-storke="國民小學">國民小學</div>');

注意：

• aria-hidden="true"：視覺文字不給讀報軟體讀。
• - tabindex="-1"：避免視覺文字進入 TAB 流。
• data-storke：提供 CSS content:attr(data-storke); 使用。
• 外層已有可讀 aria-label 或 sr-only，不要讓同一段校名被讀兩次。

CSS 核心寫法

#toplogobox{

position:relative;

width:980px;

height:194px;

min-height:194px;

overflow:visible;

--logo_left:163px;

}

#toplogobox #logoimgbox2{

position:absolute;

left:var(--logo_left);

top:66px;

width:530px;

height:66px;

margin:0;

padding:0;

font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;

font-weight:800;

line-height:62px;

white-space:nowrap;

z-index:6;

letter-spacing:8px;

overflow:visible;

}

#toplogobox #logoimgbox2 .logo_01_box,

#toplogobox #logoimgbox2 .logo_02_box,

#toplogobox #logoimgbox2 .logo_03_box{

position:relative;

display:inline-block;

margin:0;

padding:0;

font-size:45px;

font-weight:600;

line-height:62px;

letter-spacing:10px;

vertical-align:top;

color:transparent;

-webkit-background-clip:text;

background-clip:text;

}

/*====重點區塊=======*/

/*===藍字是白框厚度====*/

/*===紫字是陰影厚度====*/

#toplogobox #logoimgbox2 .logo_01_box::before,

#toplogobox #logoimgbox2 .logo_02_box::before,

#toplogobox #logoimgbox2 .logo_03_box::before{

content:attr(data-storke);

position:absolute;

left:0;

top:0;

z-index:-1;

color:#ffffff;

-webkit-text-stroke:4px #ffffff;

text-stroke:4px #ffffff;

text-shadow:

1px 1px 0 rgba(145,145,145,.55),

2px 2px 0 rgba(205,205,205,.62),

3px 3px 5px rgba(0,0,0,.28);

}

#toplogobox #logoimgbox2 .logo_01_box{

background-image:linear-gradient(0.5deg,#A4215E 50%,#BF307E 50%);

}

#toplogobox #logoimgbox2 .logo_02_box{

margin-left:6px;

font-size:58px;

letter-spacing:12px;

background-image:linear-gradient(0.5deg,#1F7BB4 50%,#2C9ACB 50%);

}

#toplogobox #logoimgbox2 .logo_03_box{

margin-left:8px;

background-image:linear-gradient(0.5deg,#E57233 50%,#EE9249 50%);

}

這樣透過::before產生白框與陰影，疊在原本文字下方，就能做出圖片中文字白框陰影的效果，有需要的朋友參考看看!!

工作心得撰寫：徐嘉裕 Neil hsu