css3如何实现浮雕效果

1、浮雕效果使用css3的新增属性字体阴影（text-shadow）来实现的，所以，首先要先了解字体阴影（text-shadow）的具体语法：

字体阴影共有3个长度参数

text-shadow：h-shadow v-shadow blur color;

h-shadow:指水平偏移  

v-shadow：指垂直偏移  

 blur：指模糊度

color:颜色

2、首先来个字体阴影例子：

css部分：

h1{

font-size: 100px;

margin:50px auto;

text-align: center;

text-shadow:10px 10px 8px rgba(0,180,255,1);

}

html部分：

<h1>文字阴影效果</h1>

效果如图：

3、如果将偏移量设置为0，就可以构建出光晕的效果。

例子：

css部分：

h1{

font-size: 100px;

margin:50px auto;

text-align: center;

text-shadow:0px 0px 8px rgba(0,180,255,1);

}

html部分：

<h1>文字阴影效果</h1>

效果如图：

4、如果将水平偏移量和垂直偏移量设置相同的值，就可以构建出凸起的浮雕效果。

例子：

css部分：

h3{

font-size: 100px;

color: #fff;

margin-top: 30px;

text-align: center;

text-shadow:2px 2px 4px #000;//水平偏移量和垂直偏移量设置相同的值

}

html部分：

<h3>浮雕效果1</h3>

效果如图：

5、掌握了字体阴影（text-shadow）的语法，使用字体阴影（text-shadow），可以很容易地制作出光晕、浮雕、投影等效果，其中颜色值可以放在这三个长度参数的最前面，可以放在最后面。

blur、color这两个参数可选可不选，h-shadow、 v-shadow这两个参数是必选的

例子：

css部分：

h4{

            font-size: 100px;

            color: #fff;

            margin-top: 30px;

            text-align: center;

            text-shadow:2px 2px ;

        }

html部分：

<h4>浮雕效果2</h4>

效果如图(注意对比两张图中有blur、color与没有blur、color这两参数的区别):