可能用css創建數字的雙大綱？

難道你怎麼看下面的圖片（我指的是綠色和白色的輪廓）可能用css創建數字的雙大綱？

任何想法，以創造數雙輪廓？

2016-09-21 Anahit DEV

只是爲了澄清，做你想要**這個**正文中的任何_ **數字字符，或者是容器內的數字（div，span等）？ –

我需要任何數字和文字字符@Lars Kristensen。感謝您澄清 –

根據需要支持的瀏覽器，它不是完全一樣的效果，但你可以實現與文字陰影和-webkit-文字筆畫的組合類似的東西。

text-shadow: 4px 4px 0 green; 
    -webkit-text-stroke: 2px white;

https://jsfiddle.net/agentfitz/rs27av43/4/

下面是使用::before和custom data attributes其它的（也許更好）選項 - 道具到代碼食肉這個智能解決方案）

https://jsfiddle.net/0wn2ok4g/2/

來源

2016-09-21 13:57:24

是的。我也在嘗試這種組合。謝謝@Brian FitzGerald –

不錯！很高興它會爲你工作。 –

從響應的角度來看，這會很難，因爲當字體大小變得很小看起來很醜時 –

你可以玩文字陰影。它看起來不酷，但我認爲這是你可以用CSS做的所有事情。

CSSTricks上的原始article。

body { 
 
    background-color: green; 
 
} 
 

 
span { 
 
    font-size: 70px; 
 
    font-family: Arial; 
 
    font-weight: bold; 
 
    color: block; 
 
    
 
    text-shadow: 
 
    -2px -2px 0 green, 
 
     2px -2px 0 green, 
 
     -2px 2px 0 green, 
 
     2px 2px 0 green, 
 
    -3px -3px 0 white, 
 
     3px -3px 0 white, 
 
     -3px 3px 0 white, 
 
     3px 3px 0 white; 
 
}

<span>1</span> 
 
<span>2</span> 
 
<span>3</span> 
 
<span>4</span> 
 
<span>A</span> 
 
<span>B</span>

來源

2016-09-21 13:23:52 3rdthemagical

嗯好主意，但是當數字變小時，我需要一些響應式解決方案@ 3rdthemagical –

@AnahitDEV對於小字號，您可以將文本陰影的大小從2px減小到1px，從3px減小到2px。或者你可以只使用外部陰影。這就是我可以推薦的。 – 3rdthemagical

是的，我明白了。謝謝@ 3rdthemagical –

可能用css創建數字的雙大綱？

回答

相關問題