使用text-shadow属性编写凹凸字体

要编写凹凸字体，首先我们来了解一下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>

使用text-shadow属性编写凹凸字体相关推荐

matplotlib的Text、FontProperties对象、字体（font）属性|中文字体的设置|图像标题、label字体的设置
matplotlib.text.Text对象见文档描述matplotlib.text 设置Text字体性质的方法有两个: Text.set(xxx=value) Text.set_xxx(value ...
css文本外观属性中设置字体,css 文本外观属性(text) 和字体样式属性(font)
css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距对中文无效 line ...
文字在阴影层上面 css,CSS3中p-tag上的双重文字阴影(Double text shadow on p-tag in CSS3)...
CSS3中p-tag上的双重文字阴影(Double text shadow on p-tag in CSS3) 是否可以使用CSS3在一个p-tag上应用两个文字阴影? 我想用1像素边框创建一个非常浅 ...
css汉字注释乱码,css font-family属性设置中文字体乱码
一般设置字体,个人都喜欢用中文,比如:font-family:"微软雅黑":但是偶尔会出现设置以后字体显示乱码的问题解决方法[1]: 看看你的CSS文件的第一行有没有:@char ...
background-clip、background-origin属性及彩虹字体的实现
文章目录 background-clip属性 border-box content-box padding-box background-clip: text; background-origin属性 ...
CSS3 Text Shadow
css2的时候已经有了text-shadow这个属性,但是css2.1的又删除了这个属性,css3又重新使用了这个属性: 语法: text-shadow:1px 2px 3px #FFF; text- ...
html中加粗的字体如何改细,css font-weight 属性设置文本字体的粗细
css font-weight介绍在CSS中,font-weight属性用来定义字体粗细.font-weight属于css1版,所以所有主流浏览器都支持font-weight属性. 初学者要注意,字 ...
【Unity3D修改Text创建时的默认字体】
Unity3D修改Text创建时的默认字体首先定位Text创建时的字体加载逻辑我使用的是Unity2019.3.2+win10系统定位到Text的脚本在 Unity\Editor\Data\Re ...
CSS常用属性-3.1字体文字-1.字体font-family-2.尺寸font-size-3.样式font-style-4.粗细font-weight-5.简写属性font
1.字体使用font-family属性来定义文字的字体属性值为字体的名称,可以设置多个字体名称,浏览器会按照顺序使用它第一个支持的字体(本地电脑有没有安装改字体) 相当于字体优先级列表介绍几个 ...

使用text-shadow属性编写凹凸字体

使用text-shadow属性编写凹凸字体相关推荐

最新文章

热门文章