CSS文本效果

最新推荐文章于 2024-08-21 16:13:13 发布

fxy流年无悔

最新推荐文章于 2024-08-21 16:13:13 发布

阅读量667

点赞数

分类专栏： web 文章标签： css

本文链接：https://blog.csdn.net/a716121/article/details/52149787

版权

web 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

效果：

1.文本阴影：

p{
font-size: 50px;
text-shadow: -1px -1px 1px red;
text-shadow: 2px 2px 1px red;

}

2.文本裁剪：

p{
font-size: 20px;
width: 160px;
background-color: silver;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
text-overflow: ellipsis;

}

3.文本描边

/*文本描边*/
/*p{
font-size: 50px;
-webkit-text-stroke:1px red;
-webkit-text-stroke-width:3px;
-webkit-text-stroke-color:orange;

}

4.文本填充：

/*文本填充*/
/*p{
font-size: 50px;
font-family: 黑体;
background:
-webkit-linear-gradient(top,#eee,#aaa 50%,#333 51%,#000);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}*/

index.html:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<title>CSS3文本效果</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>我是HTML5,我是超文本标记语言</p>
</body>
</html>

style.css；

@charset "utf-8";
p{
	/*文本阴影*/
	font-size: 50px;
	text-shadow: -1px -1px 1px red;
	text-shadow: 2px 2px 1px red;

    


	/*文本裁剪*/
/*	font-size: 20px;
    width: 160px;
    background-color: silver;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    text-overflow: ellipsis;*/

   

}
/*文本描边*/
/*p{
	font-size: 50px;
	-webkit-text-stroke:1px red;
	-webkit-text-stroke-width:3px;
	-webkit-text-stroke-color:orange;

}

/*文本填充*/
/*p{
	font-size: 50px;
	font-family: 黑体;
	background: 
	-webkit-linear-gradient(top,#eee,#aaa 50%,#333 51%,#000);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;

}*/