【CSS3学习笔记】14:文本效果

xiaoxiao2021-02-28  107

本节学习CSS3中一些文本属性的设置。

[1]文本阴影

text-shadow: 横向 纵向 模糊度 颜色;

可以作多重阴影叠加。

[2]文本裁剪 把溢出的部分裁剪掉,然后判断是否加省略号。要配合其它属性一起用。 不能换行:

white-space: nowrap;

控制溢出:

overflow: hidden;

裁剪后不添加省略号:

text-overflow: clip;

裁剪后添加省略号:

text-overflow: ellipsis;

*这两个属性的测试

<!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> </html> @charset "utf-8"; p{ background: #e9dfd1; width: 160px; font-size: 50px; color: #f1ebe5; text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

测试结果:

[3]文本描边(实验阶段)

-webkit-text-stroke: 描边量 颜色;

[4]文本填充(实验阶段)

-webkit-text-fill-color: 填充什么;

它单独用起来和改变自己颜色没什么区别,但可以和其它CSS属性搭配产生新的效果。

*这两个属性的测试

<!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> </html> @charset "utf-8"; p{ font-size: 200px; -webkit-text-stroke: 3px red; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: orange; font-family: 黑体; background: -webkit-linear-gradient(top,#eee,#aaa 50%,#333 51%,#000);/*搭配*/ -webkit-background-clip: text;/*搭配*/ -webkit-text-fill-color: transparent;/*填充为透明*/ }

测试结果:

转载请注明原文地址: https://www.6miu.com/read-17886.html

最新回复(0)