所以这就是我得到的东西,我可以在文本周围找到边框但是我不能将它与文本阴影结合起来......我怎么能绕过这个?也许这是: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>
答案 0 :(得分:2)
也许这个解决方案正是您所寻找的:
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;
答案 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)
不确定这是否是您要查找的内容,但只需添加另一个X
和Y
设置为-2px
的值即可。
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;
请注意,在上面的代码段中,我添加了-2px -2px 10px black
-2px
为X
,另一个为Y
,最后一个为10px
1}}是影子传播。
答案 3 :(得分:1)
接近你想要的东西。
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;
答案 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>