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

html-css014

做这样的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以下不支持。

浏览器支持 表中的数字指定完全支持该属性的第一个浏览器版本。 数字后面的 -webkit- 或者 -moz- 使用时需要指定前缀。

2. CSS3 阴影的文字特效 CSS代码: <!DOCTYPE CSS><CSS lang="en"><head><meta charset="UTF-8"><title>

3. box-shadow 属性 CSS3box-shadow属性应用

box-shadow 属性--设置元素阴影

实例：  向 div 元素添加 box-shadow

<!DOCTYPE html>

<html>

<head>

    <style> 

        div{

            width:300px

            height:100px

            background-color:#ff9900

            -moz-box-shadow: 10px 10px 5px #888888 /* 老的 Firefox */

            box-shadow: 10px 10px 5px #888888

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

text-shadow 属性 ---设置文字阴影 <!DOCTYPE html>

<html>

<head>

    <style>

   

         h1{

            text-shadow: 5px 5px 5px #FF0000

        }

    </style>

</head>

<body>

    <h1>文本阴影效果！</h1>

</body>

</html>