![CSS3中，设置文字阴影的正确写法是（） [多选题] *,第1张](/aiimages/CSS3%E4%B8%AD%EF%BC%8C%E8%AE%BE%E7%BD%AE%E6%96%87%E5%AD%97%E9%98%B4%E5%BD%B1%E7%9A%84%E6%AD%A3%E7%A1%AE%E5%86%99%E6%B3%95%E6%98%AF%EF%BC%88%EF%BC%89+%5B%E5%A4%9A%E9%80%89%E9%A2%98%5D+%2A.png "CSS3中，设置文字阴影的正确写法是（） [多选题] *,第1张")
background-color(正确答案)
background-image(正确答案)
background-repeat(正确答案)
background-position(正确答案)
建议楼主多看看CSS手册。
语法：
text-shadow：none | <shadow> [ , <shadow> ]*
<shadow> = <length>{2,3} && <color>?
默认值：none
适用于：所有元素
继承性：有
取值：
none：无阴影
<length>①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<color>：设置对象的阴影的颜色。
<!DOCTYPE html><html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>text-shadow_CSS参考手册_web前端开发参考手册系列</title>
<style>
.test li{margin-top:10px}
.test .mormal p{text-shadow:1px 1px rgba(0,0,0,.3)}
.test .blur p{text-shadow:1px 1px 1px rgba(0,0,0,.3)}
.test .group p{text-shadow:1px 1px 0 rgba(255,255,255,1),1px 1px 2px rgba(0,85,0,.8)}
</style>
</head>
<body>
<ul class="test">
<li class="mormal">
<strong>普通文字阴影</strong>
<p>测试普通文字阴影效果</p>
</li>
<li class="blur">
<strong>模糊文字阴影效果</strong>
<p>测试模糊文字阴影效果</p>
</li>
<li class="group">
<strong>多重模糊文字阴影效果</strong>
<p>测试多重模糊文字阴影效果</p>
</li>
</ul>
</body>
</html>
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字阴影</title>
<style>
div{
background-color:#EBEBEB
width:500px
height:100px
line-height:100px
color:#E3E1E2
font-size:40px
font-weight:bold
font-family:"Arial Black", Gadget, sans-serif
text-shadow:0 1px 1px rgba(255,255,255,1),
0 -1px 1px rgba(0,0,0,.3)
}
</style>
</head>
<body>
<div>This is heading</div>
</body>
</html>
效果图：
大概就是这样子的，你再调一调就能和你的图片一样了，css3文字阴影效果只有支持css3的浏览器才能显示，比如chrome、Firefox等，IE9以下不支持。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）