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

最新推荐文章于 2021-12-28 22:53:26 发布

大桔骑士v

最新推荐文章于 2021-12-28 22:53:26 发布

阅读量886

点赞数

分类专栏： CSS 文章标签： css3 html5 文本

本文链接：https://blog.csdn.net/SHU15121856/article/details/77727927

版权

CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本节学习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;/*填充为透明*/
}