使用css的文本邊框（文字邊框）

177

使用多個文本陰影：

text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;

enter image description here

body { 
 
    font-family: sans-serif; 
 
    background: #222; 
 
    color: darkred; 
 
    } 
 
h1 { 
 
    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; 
 
}

<h1>test</h1>

或者，您可以用文字中風，只能在webkit的：

-webkit-text-stroke-width: 2px; 
-webkit-text-stroke-color: #fff;

enter image description here

body { 
 
    font-family: sans-serif; 
 
    background: #222; 
 
    color: darkred; 
 
    } 
 
h1 { 
 
    -webkit-text-stroke-width: 2px; 
 
-webkit-text-stroke-color: #fff; 
 
}

<h1>test</h1>

而且read more爲CSS-技巧。

來源

2012-11-17 03:05:53 bookcasey

+0

值得注意的是：請測試這些方法的跨瀏覽器功能......我對IE的客戶端存在嚴重的問題，至少有9 ..有點想到去PNG的方式。 – ErickBest

+1

@ErickBest第二個鏈接確實提到了IE9的問題。雖然此頁面在Google上不難找到http://caniuse.com/css-textshadow – Annan

+0

導致透明文本顯示不良（使用rgba）。 – alej27

10

當然可以。你可以使用CSS3 text-shadow：

text-shadow: 0 0 2px #fff;

然而，它在所有瀏覽器不會顯示的時候了。使用像Modernizr這樣的腳本庫將有助於在大多數瀏覽器中正確使用它。

來源

2012-11-17 01:58:17 jtheman

+0

我已經嘗試過，先生，但是我我需要的是文本週圍有白色固體。 – jho1086

5

下面將涵蓋所有的瀏覽器值得覆蓋：

text-shadow: 0 0 2px #fff; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */ 
filter: progid:DXImageTransform.Microsoft.Glow(Color=#ffffff,Strength=1); /* IE<10 */

來源

2012-11-17 02:10:48 dtbarne

5

text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

來源

2015-05-28 10:22:18 chezwhite

+2

你還可以添加解釋嗎？ – Robert

4

我不喜歡基於乘以文本的陰影那麼多的解決方案，它不是真正靈活，它可以爲2個像素行程在哪裏工作方向增加8個，但只有3個像素行程方向成爲16，依此類推...... 管理起來並不十分舒適。

使用正確的工具存在，這是SVG <text> 的瀏覽器的支持問題一文不值在這種情況下，「導致文字陰影的使用量也 filter: progid:DXImageTransform可以使用其自己的支持問題，或者IE < 10，但往往不按預期工作。

對我來說，最好的解決辦法仍然是SVG在沒有捋文本回退爲舊版瀏覽器：

這種approuch適用於Chrome和Firefox，Safari瀏覽器的pratically所有版本，因爲3.04版本，歌劇院8，IE 9

相比text-shadow其載體爲：的Chrome 4.0， FF 3.5， IE 10，Safari瀏覽器 4.0， Opera 9中，它會導致更兼容。

.stroke { 
 
    margin: 0; 
 
    font-family: arial; 
 
    font-size:70px; 
 
    font-weight: bold; 
 
    } 
 
    
 
    svg { 
 
    display: block; 
 
    } 
 
    
 
    text { 
 
    fill: black; 
 
    stroke: red; 
 
    stroke-width: 3; 
 
    }

<p class="stroke"> 
 
    <svg xmlns="http://www.w3.org/2000/svg" width="700" height="72" viewBox="0 0 700 72"> 
 
    <text x="0" y="70">Stroked text</text> 
 
    </svg> 
 
</p>

來源

2017-11-09 18:09:13 holden

+0

感謝您分享您的解決方案。我認爲你的權利更加靈活。但大多數情況下，使用CSS會更高效。我會稍後嘗試使用SVG。 – jho1086

使用css的文本邊框（文字邊框）

回答

相關問題