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

html-css011

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

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

在样式表中,定义一个

img

{filter:none}

这样,页面中的所有图片就不会有发光效果了!

把body的stlye属性删除掉，再把你要发光的字体加入到一个DIV

可以使用 background-image 属性并指定 linear-gradient 函数。

比如想为文本添加从红色到蓝色的渐变色：

.text {

background-image: linear-gradient(to right, red, blue)

-webkit-background-clip: text

-webkit-text-fill-color: transparent

}

另外，还可以使用其他函数，例如 radial-gradient，以创建径向渐变。

希望这可以帮到你。