CSS3的文本阴影text-shadow属性应该如何使用


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来CSS3的文本阴影text-shadow属性应该如何使用,使用CSS3的文本阴影text-shadow的注意事项有哪些,下面就是实战案例,一起来看一下。

文本阴影text-shadow属性特效:

1.右下角阴影,左下角阴影,左上角阴影,右上角阴影

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<!DOCTYPE html> 

<html lang="en"

<head> 

    <meta charset="UTF-8"

    <title>text-shadow</title> 

    <style> 

        p{  

          text-align:center;  

          margin:0;  

          font-family: helvetica,arial,sans-serif;  

          color:#999;  

          font-size:80px;  

          font-weight:bold;  

          text-shadow:10px 10px #333;  

        }  

    </style> 

</head> 

<body> 

    <p>Text Shadow</p> 

</body> 

</html>

如果将text-shadow改成:text-shadow:-10px 10px #333 ,就将出现左下角阴影

将text-shadow改成:text-shadow:-10px -10px #333 , 就将出现左上角阴影

将text-shadow改成:text-shadow: 10px -10px #333 , 就将出现右上角阴影

2. 使用text-shadow设置立体文字效果

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!DOCTYPE html> 

 <html lang="en"

 <head

     <meta charset="UTF-8"

     <title>text-shadow</title

     <style

         p{  

           text-align:center;  

           margin:0;  

           font-family: helvetica,arial,sans-serif;  

           color:#999;  

           font-size:80px;  

           font-weight:bold;  

           text-shadow:-1px -1px #fff,  

                                    1px 1px #333;  

         }  

     </style

 </head

 <body

     <p>Text Shadow</p

 </body

 </html>

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

HTML文本格式化的实例详解

html中频繁用的标签总结

在p中img,span怎样可以做出垂直居中

以上就是CSS3的文本阴影text-shadow属性应该如何使用的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

css3绘制一个圆圆的loading转圈动画实例分享

css3实现文字折纸效果的方法(代码示例)

border-image-source属性怎么用

css3如何实现元素环绕中心点布局(代码示例)

css3的含义是什么

css3是什么意思

css3如何设置背景图片

怎样实现meta标签中的viewport来控制设备屏幕的css属性

css3 transition-duration属性怎么用

css如何设置文字间距

更多相关阅读请进入《text-shadow》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...