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

最新推荐文章于 2020-09-07 22:22:03 发布

潜龙卧湖

最新推荐文章于 2020-09-07 22:22:03 发布

阅读量342

点赞数

文章标签：文字 css 前端

本文链接：https://blog.csdn.net/weixin_44046450/article/details/93304124

版权

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>

效果如下：
在这里插入图片描述

潜龙卧湖

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css 行高对齐文字缩进文字距离文字的透明文字阴影

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

扫一扫