css3新特性第三章(文本属性)
一、文本属性
- 文本阴影
- 文本换行
- 文本溢出
- 文本修饰
- 文本描边
1.1 文本阴影
-
在 CSS3 中，我们可以使用 text-shadow 属性给文本添加阴影。
-
语法：
text-shadow: h-shadow v-shadow blur color;
| 值 | 描述 |
|---|---|
| h-shadow | 必需写，水平阴影的位置。允许负值。 |
| v-shadow | 必需写，垂直阴影的位置。允许负值。 |
| blur | 可选，模糊的距离。 |
| color | 可选，阴影的颜色 |
公共代码
<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 强制不换行 -
公共代码部分
.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
这个时候我们将其中一行增加长度超出文本宽度长度
<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 值
-
基础代码
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 文本装饰线条的颜色
- text-decoration-line 设置文本装饰线的位置
单独设置各个属性
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 ：复合属性，设置文字描边宽度和颜色。
效果+代码
<style>h1 {font-size: 50px;-webkit-text-stroke-color: deeppink;-webkit-text-stroke-width: 3px;/* 空闲文字 */color: transparent;}</style>
</head>
<body><h1>欢迎光临 会员中心</h1>
</body>
