做这样的CSS文字阴影效果,该怎么做?_IT百科

<!DOCTYPE html>

<html>

<head>

<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以下不支持。

text-shadow: 1px 2px 3px #FF0000数值意思是-----1px水平阴影的位置,允许负值。2px垂直阴影的位置,允许负值。3px模糊的距离。#FF0000阴影的颜色。

所有主流浏览器都支持 text-shadow 属性。IE 9 以及更早版本的浏览器不支持 text-shadow 属性。

CSS3中，设置文字阴影的正确写法是（） [多选题] *

background-color(正确答案)

background-image(正确答案)

background-repeat(正确答案)

background-position(正确答案)

欢迎分享，转载请注明来源：内存溢出

做这样的CSS文字阴影效果,该怎么做?