零基础建站培训介绍

当前位置:

CSS3 text-shadow 属性使用方法详解

CSS3 text-shadow 属性是CSS3中设置文字阴影的属性,通过这个属性可以设置文字的各个角度的阴影效果。下面介绍一下CSS3 text-shadow 属性的使用方法。(相关教程:CSS3视频教程

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


<!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>

文字效果为:

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

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

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


<!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>

以上这篇CSS3文本阴影text-shadow属性详解就是分享给大家的全部内容了,希望能给大家一个参考。

上一课: 下一课:

发表评论

电子邮件地址不会被公开。 必填项已用*标注