css3常用五种字体效果

最新推荐文章于 2024-07-12 22:36:11 发布

想旅游咯

最新推荐文章于 2024-07-12 22:36:11 发布

阅读量1k

点赞数

分类专栏： web前端

web前端专栏收录该内容

109 篇文章 2 订阅

订阅专栏

css3常用五种字体效果

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="作者">
<meta name="keywords" content="关键字">
<meta name="description" content="描述">
<title></title>
<style>
*{margin:0px;padding:0px;}
#content{background:green;height:100%;width:500px;margin:20px auto;border:1px solid green;}
ul{list-style-type:none}
.fenlei{font-size:20px;font-family:"微软雅黑";background:red;color:yellow;}
#style1{ text-shadow:1px 1px 2px #2c5103; color:#cc9999; background:#3699f6;}
#content .style{font-size:70px; margin:2px 50px;font-family:"迷你简启体"}
#style2{text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
color:#fff; background:#3699f6;
   }
#style3{ text-shadow:0 0 20px #ff6600; color:#fff; background:#333; }
#style4{ text-shadow:0 0 10px #fff; color:transparent; background:#333;}
#style5{text-shadow: 0 1px 1px #FFF; color: #717171; background:#d3d3d3;}
#style6{ text-shadow: -1px -1px #fff, 1px 1px #333; color: #CCC; background:#d3d3d3;}
</style>
</head>
<body>
<div id="content">
<ul>
<li class="fenlei">1.普通:</li>
<li id="style1" class="style">李明杰</li>
<li class="fenlei">2.3D:</li>
<li id="style2" class="style">李明杰</li>
<li class="fenlei">3.外发光：</li>
<li id="style3" class="style">李明杰</li>
<li class="fenlei">4.模糊：</li>
<li id="style4" class="style">李明杰</li>
<li class="fenlei">5.凹痕：</li>
<li id="style5" class="style">李明杰</li>
<li class="fenlei">6.浮雕：</li>
<li id="style6" class="style">李明杰</li>
</ul>
</div>
</body>
</html>