Text-shadow
是实现文字发光或产生某种阴影效果所必须使用的属性。
p{
text-shadow : horizontal-shadow vertical-shadow blur color;
}
要添加多个文本阴影,您可以通过在text-shadow属性中添加逗号来分隔它们。
p{
text-shadow : horizontal-shadow vertical-shadow blur color, horizontal-shadow vertical-shadow blur color;
}
p{
background:#111;
color:#fff;
text-shadow:1px 1px 10px #fff, 1px 1px 10px #ccc;
font-size:48px;
text-align:center;
}
<p>
Demo Text
</p>
这里使用了text-shadow
,前两个值分别代表x
和y
的偏移量,第三个值指定了阴影的模糊程度:
text-shadow: 0 0 32px black;
body {
background-color: #00bcd4;
}
p {
margin: 30px;
color: white;
font-family: sans-serif;
font-size: 40px;
font-weight: bold;
text-shadow: 0 0 32px black;
}
<p>Lorem ipsum dolor sit amet</p>
body{
background-color: #CCAA77;
}
div{
font-size: 40px;
color: white;
text-shadow: 0px 0px 30px white,0px 0px 30px white,0px 0px 30px white,0px 0px 10px #553300,0px 0px 10px #553300;
}
<div>Protecting From Cancer</div>
正如你所看到的,你可以组合几个文本阴影使它们更加强烈,并混合颜色。