16、实例文字阴影

最新推荐文章于 2022-02-17 17:14:54 发布

原创最新推荐文章于 2022-02-17 17:14:54 发布 · 550 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

36 篇文章

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文字阴影</title>
<style  type="text/css">
 span
 {
	 display:block;
	 padding:8px;
	 font-size:xx-large;}
</style>
</head>


<body>
普通拉伸,只有一个阴影
<!-- 颜色 水平拉伸距离,垂直拉伸距离 模糊效果，颜色也可以放最后-->
<span style="text-shadow:red 5px 5px 2px;">
天津理工
</span>
<span style="text-shadow:red -5px -5px 2px;">
天津理工
</span>
<span style="text-shadow:red 0px 5px 1px;">
天津理工
</span>

<span style="text-shadow: -15px 15px 1px red;">
天津理工
</span>

<span style="text-shadow: -15px 15px 1px red, 10px 10px #00CC66;">
天津理工
</span>
立体字
<p style="text-align:center;padding:24px;margin:0px; font-family:Georgia,
 'Times New Roman', Times, serif; font-weight:bold;color:#d1d1d1;font-size:80px;background:#CCC; text-shadow:1px 1px white, -1px -1px  #333333;">
 天津理工大学
 </p>


</body>
</html>