CSS - 将文本阴影与文本轮廓相结合?

时间:2017-12-19 09:30:27

标签: html css css3 box-shadow

我正在努力实现这一目标(不要介意红色背景)enter image description here

所以这就是我得到的东西,我可以在文本周围找到边框但是我不能将它与文本阴影结合起来......我怎么能绕过这个?也许这是:before :after陈述的内容?

h1, h2 { 
    font-family: Chicago;
    font-size: 38px;
    color: #FFFFFF;
    letter-spacing: 1.73px;
    
    
    

    /*
    text-shadow: 0 0 5px #000000; 
    
    THIS WILL GIVE THE TEXT THE SHADOW*/
    
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    /*THIS WILL GIVE THE TEXT THE BORDER*/
    
    /*How can I combine these two?*/
}
<h1>CSS ZEN GARDEN</h1>
<h1>THE BEAUTY OF CSS DESIGN</h1>

5 个答案:

答案 0 :(得分:2)

也许这个解决方案正是您所寻找的:

&#13;
&#13;
h1 {
   -webkit-text-stroke: 1px black;
   color: white;
   text-shadow:
     3px 3px 5px #000,
     -1px -1px 5px #000,  
     1px -1px 5px #000,
     -1px 1px 5px #000,
      1px 1px 5px #000;
}
&#13;
<h1>CSS ZEN GARDEN</h1>
<h1>THE BEAUTY OF CSS DESIGN</h1>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

看看this小提琴。 你必须使用-webkit-text-stroke,然后你可以单独使用笔划和阴影

h1, h2 { 
    font-family: Chicago;
    font-size: 38px;
    color: #FFFFFF;
    letter-spacing: 1.73px;
    -webkit-text-stroke: 1px black;
    }
<h1>CSS ZEN GARDEN</h1>
<h1>THE BEAUTY OF CSS DESIGN</h1>

答案 2 :(得分:1)

不确定这是否是您要查找的内容,但只需添加另一个XY设置为-2px的值即可。

&#13;
&#13;
h1, h2 { 
    font-family: Chicago;
    font-size: 38px;
    color: #FFFFFF;
    letter-spacing: 1.73px;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, -2px -2px 10px black;
}
&#13;
<h1>CSS ZEN GARDEN</h1>
<h1>THE BEAUTY OF CSS DESIGN</h1>
&#13;
&#13;
&#13;

请注意,在上面的代码段中,我添加了-2px -2px 10px black -2pxX,另一个为Y,最后一个为10px 1}}是影子传播。

答案 3 :(得分:1)

接近你想要的东西。

&#13;
&#13;
h1, h2 { 
    font-family: Chicago;
    font-size: 38px;
    color: #FFFFFF;
    letter-spacing: 1.73px;
    
    
    

    color: white;
    text-shadow: 1px 1px 2px black, 0 0 5px black, 0 0 5px black;
}
&#13;
<h1>CSS ZEN GARDEN</h1>
<h1>THE BEAUTY OF CSS DESIGN</h1>
&#13;
&#13;
&#13;

答案 4 :(得分:1)

为所有值得报道的浏览器试试这个:

h1, h2 { 
    font-family: Chicago;
    font-size: 38px;
    color: #FFFFFF;
    letter-spacing: 1.73px;
    
    
    text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #fff, 1px -1px 0 #000, -1px 1px 0 #000; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */

filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1); /* IE<10 */

}
<h1>CSS ZEN GARDEN</h1>
<h1>THE BEAUTY OF CSS DESIGN</h1>

h1, h2 { 
    font-family: Chicago;
    font-size: 38px;
    color: #FFFFFF;
    letter-spacing: 1.73px;
    
    

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


}
<h1>CSS ZEN GARDEN</h1>
<h1>THE BEAUTY OF CSS DESIGN</h1>