css3新特性第三章(文本属性)

一、文本属性

文本阴影
文本换行
文本溢出
文本修饰
文本描边

1.1 文本阴影

在 CSS3 中，我们可以使用 text-shadow 属性给文本添加阴影。
语法：

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需写，水平阴影的位置。允许负值。
v-shadow	必需写，垂直阴影的位置。允许负值。
blur	可选，模糊的距离。
color	可选，阴影的颜色

公共代码

markdown 复制代码

<body>
     <div class="box1">你好啊！</div>


     
</body>

写法一（两个值）

text-shadow: 3px 3px;

代表的是水平和垂直方向阴影的距离

效果

写法二（三个值）

/* 第二种写法三个值背景颜色*/

text-shadow: 3px 3px pink;

效果

写法三(四个值)

/* 第三种写法四个值模糊程度背景颜色*/

text-shadow: 0px 0px 5px pink;

效果

案例小技巧使用

我们一般水平和垂直方法不设置偏移量，只设置模糊程度和背景颜色

技巧1

/* 使用小技巧1 */

color: white;

text-shadow: 0px 0px 15px black;

技巧2

/* 使用小技巧2 设置整个body为黑色 */

color: white;

font-size: 80px;

text-shadow: 0px 0px 25px red;

1.2 文本换行

在 CSS3 中，我们可以使用 white-space 属性设置文本换行方式。

常用值如下：

值	含义
normal	文本超出边界自动换行，文本中的换行被浏览器识别为一个空格。（默认值）
pre	原样输出，与 pre 标签的效果相同。
pre-wrap	在 pre 效果的基础上，超出元素边界自动换行。
pre-line	在 pre 效果的基础上，超出元素边界自动换行，且只识别文本中的换行，空格会忽略。
nowrap	强制不换行

公共代码部分

markdown 复制代码

.box1 {
      width: 400px;
      height: 400px;
      border: 1px solid #000;
      font-size: 20px;
 }
<body>
     <div class="box1">
      寄黄几复   
      黄庭坚·宋     
      我居北海君南海 
      寄雁传书谢不能
      桃李春风一杯酒
      江湖夜雨十年灯
      持家但有四立壁
      治病不蕲三折肱
      想见读书头已白
      隔溪猿哭瘴溪藤
     </div>

    
</body>

默认值 normal

white-space: normal;

pre

/* 按原文显示，如果超出了宽度，也会原样输出 */

white-space: pre;

pre-wrap

这个时候我们将其中一行增加长度超出文本宽度长度

markdown 复制代码

  <div class="box1">
      寄黄几复   
      黄庭坚·宋     
      我居北海君南海 我居北海君南海 我居北海君南海 我居北海君南海 我居北海君南海 我居北海君南海 
      寄雁传书谢不能
      桃李春风一杯酒
      江湖夜雨十年灯
      持家但有四立壁
      治病不蕲三折肱
      想见读书头已白
      隔溪猿哭瘴溪藤
     </div>

pre-line

/* 如果一行过长，会自动换一行显示，特点：文本始末空格都给出掉了，只认换行 */

white-space: pre-line;

nowrap

/* 所有的文本都不换行，都放到一行 */

white-space: nowrap;

none

默认值，默认是 none 什么都不处理

1.3 文本溢出

在 CSS3 中，我们可以使用 text-overflow 属性设置文本内容溢出时的呈现模式。
常用值如下：

值含义

clip 当内联内容溢出时，将溢出部分裁切掉。（默认值）

ellipsis 当内联内容溢出块容器时，将溢出部分替换为 ... 。
注意

要使得 text-overflow 属性生效，块容器必须显式定义 overflow 为非 visible 值， white-space 为 nowrap 值

值	含义
clip	当内联内容溢出时，将溢出部分裁切掉。（默认值）
ellipsis	当内联内容溢出块容器时，将溢出部分替换为 ... 。

基础代码

markdown 复制代码

 ul {
         width: 400px;
         height: 400px;
         border: 1px solid black;
         font-size: 20px;
         list-style: none;
         padding: 10px;
         
      }
<ul>
  <li>新闻1短标题1</li>
  <li>共同擘画中越命运共同体建设新蓝图</li>
  <li>这条轻轨，见证了xx情谊</li>
  <li>增长940%，突然爆火！xxxxxxx大幅度发的：堪称"省钱利器"</li>
  <li>多家媒体发表报道称，经过多年高强度研发，三大 AI 巨头在开发新模型时，回报和努力开始不成正比：OpenAI训练的新模型"Orion"未能达到预期，Google的Gemini新模型同样表现不佳，而Anthropic推迟了Claude新版本的发布时间。</li>

```

clip

超出文字部分截掉，这个的前提是需要设置文字不换行，并且需要设置 overflow 的属性

li {

margin-bottom: 10px;

white-space: nowrap;

/* 这个属性必须写 visible 不写就可以了*/

overflow: hidden;

/* 文字溢出第一种超出文字部分截掉 */

text-overflow: clip;

}

ellipsis

超出文字部分用...替代,看起来效果更好一些

li {

margin-bottom: 10px;

white-space: nowrap;

/* 这个属性必须写 visible 不写就可以了*/

overflow: hidden;

/* 文字溢出第二种超出文字部分用...替代 */

text-overflow: ellipsis;

}

1.4 文本修饰

CSS3 升级了 text-decoration 属性，让其变成了复合属性。

text-decoration: text-decoration-line || text-decoration-style || text-decorationcolor
子属性及其含义：
- text-decoration-line 设置文本装饰线的位置
  - none ：指定文字无装饰（默认值）
  - underline ：指定文字的装饰是下划线
  - overline ：指定文字的装饰是上划线
  - line-through ：指定文字的装饰是贯穿线
- text-decoration-style 文本装饰线条的形状
  - solid ：实线（默认）
  - double ：双线
  - dotted ：点状线条
  - dashed ：虚线
  - wavy ：波浪线
- text-decoration-color 文本装饰线条的颜色

单独设置各个属性

markdown 复制代码

 h1 {
       font-size: 100px;
       /* text-decoration: line-through; */

       /* 单独设置线   上划线*/
       text-decoration-line: overline;
       /* 虚线 */
       text-decoration-style: dashed;
       /* 颜色 */
       text-decoration-color: pink;

     }
  </style>
</head>
<body>
    <h1>你好啊！欢迎你来玩</h1>
</body>

复合属性设置

/* 复合属性破浪线*/

text-decoration: overline wavy pink;

1.5 文本描边

注意：文字描边功能仅 webkit 内核浏览器支持。

-webkit-text-stroke-width ：设置文字描边的宽度，写长度值。
-webkit-text-stroke-color ：设置文字描边的颜色，写颜色值。
-webkit-text-stroke ：复合属性，设置文字描边宽度和颜色。

效果+代码

markdown 复制代码

 <style>
     h1 {
       font-size: 50px;
       -webkit-text-stroke-color: deeppink;
       -webkit-text-stroke-width: 3px;
       /* 空闲文字 */
       color: transparent;
     }
  </style>
</head>
<body>
     <h1>欢迎光临 会员中心</h1>
</body>