当前位置：首页 > article >正文

css 行高对齐文字缩进文字距离文字的透明文字阴影

article 2025/9/17 17:09:15

css 行高对齐文字缩进文字(英文)距离文字的透明文字阴影

行高(line-height:??px)对齐:行高就是文字在一行中所占的高度,当设置文字所在的位置(盒子)的高度为50px,当我们不设置行高的时候,文字在一行中就显得不居中,那么怎么解决这个问题呢?我们只要将行高也设置为50px,那么文字就会根据行高来自动的居中。下面来演示一下，加行高和不加行高的效果。
第一种不加行高的代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><style>div {height: 50px;background: pink;}</style></head><body><div>搞事情</div></body>
</html>

效果就会成为这个样子：
在这里插入图片描述
很显然它的效果就是不居中，显得很难看。
第二种就是加行高的代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><style>div {height: 50px;background: pink;line-height: 50px;}</style></head><body><div>搞事情</div></body>
</html>

效果如下：
在这里插入图片描述
这样就显得舒服多了。
文字缩进(text-indent:??em)：：就是将文字向右移动一点。
代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><style>p:first-child {color: #00FF00;text-indent: 5em;  }p:last-child{color: #00a4ff;}</style></head><body><p>我比较快</p><p>我先让你几米。</p></body>
</html>

效果如下：
在这里插入图片描述
可以很明显的察觉这个效果的差异。
文字(英文)距离：文字的间距用letter-spacing：+px；英文的距离用word-spacing:+px;
代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><style>div {letter-spacing: 10px;}p {word-spacing: 10px;}</style></head><body><div>我们之间有10个像素的差距，我们不合适。</div><p>There is a ten-pixel gap between us, which is not suitable for us.（百度翻译）</p></body>
</html>

效果如下：
在这里插入图片描述
文字的透明：rgba(0,0,0,0.1),前三个数值表示为颜色，第四个表示透明度。
代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><style>h1 {color: rgba(0, 0, 0, 0.1);  }h2 {color: rgba(0, 0, 0, 1); }</style></head><body><h1>我的肾透支了！！！</h1><h2>我超级强壮的！</h2></body>
</html>

效果如下：
在这里插入图片描述
文字阴影：text-shadow：？？？？？？？？，它有四个数值，分别代表的是水平位置垂直位置模糊距离阴影颜色。后面两个可以省略。
代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><style>h1 {font-size: 100px;text-shadow: 5px 11px 3px rgba(0,0,0,0.5);}</style></head><body><h1>你的心中是否有阴影！</h1></body>
</html>