利用css3实现如下凹型字体
2019年09月18日
708
利用css3实现如下凹型字体
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3实现如下凹型字体</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 800px;
height: 300px;
line-height: 300px;
margin: 100px auto 0;
font-size: 100px;
font-weight: bold;
color: #666;
background-color: #666;
text-align: center;
}
.ao{
/*-1px水平阴影 -1px垂直阴影 1px模糊距离 #000阴影的颜色*/
/*可以设置多个阴影 每个阴影之间使用逗号隔开*/
text-shadow: -1px -1px 1px #000,1px 1px 1px #fff;
}
</style>
</head>
<body>
<div id="box">
<p class="ao">我爱HTML5</p>
</div>
</body>
</html>