要编写凹凸字体，首先我们来了解一下text-shadow这个属性
text-shadow 的语法
text-shadow: h-shadow v-shadow blur color;
h-shadow:水平阴影的位置，允许为负值
v-shadow:垂直阴影的位置，允许为负值
blur:模糊的距离
color:阴影的颜色
大家都知道，如果在同一个选择器中编写两个或两个以上的相同的属性时，后面的就会覆盖掉前面的属性，无法实现多个共存。
但text-shadow有一个很好的语法运用，就是可以向文本添加一个或多个阴影，该属性是用逗号隔开。
这张图是一个很好的凹凸字，我们先来看凸字体。
凸字体左上方是光亮，右下方是阴影，形成鲜明的对比，给人的感觉就是这字体凸出纸面一样
为了显示光亮，先设置全局背景的颜色（色调自己选）
body{
background-color: #ccc;/*因为有白色显示，所以设置全局颜色*/
}
p{
color: #ccc; /*字体颜色*/
font:700 50px "微软雅黑"; /*顺序是font-style,font-weight,font-size,font-family*/
}
html部分的代码
<body>
<p>我是凹字体</p>
<p>我是凸字体</p>
</body>
凸字体的css设置
p:last-child{
text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff; /*凸字体*/
}
凹字体和凸字体刚好相反，左上方是阴影，右下方是光亮，形成鲜明的对比，给人的感觉就是这字体要凹陷进纸面一样
凹字体的css设置
p:first-child{
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff; /*凹字体*/
}
显示结果：
虽然没有引用的图片那么漂亮，但我们也学到知识了。想要更漂亮，自己再调一下自己想要的css样式。
完整的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>凹凸字体练习</title>
</head>
<style type="text/css">
body{
background-color: #ccc;/*因为有白色显示，所以设置全局颜色*/
}
p{
color: #ccc; /*字体颜色*/
font:700 50px "微软雅黑"; /*顺序是font-style,font-weight,font-size,font-family*/
}
p:first-child{
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff; /*凹字体*/
}
p:last-child{
text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff; /*凸字体*/
}
</style>
<body>
<p>我是凹字体</p>
<p>我是凸字体</p>
</body>
</html>
6865
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
