前端基础（七.CSS3 文本、过渡）

最新推荐文章于 2023-12-06 14:50:26 发布

小鱼干儿er

最新推荐文章于 2023-12-06 14:50:26 发布

阅读量233

点赞数 1

分类专栏：前端学习文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_45689821/article/details/113492092

版权

前端学习专栏收录该内容

39 篇文章 2 订阅

订阅专栏

七.CSS3 文本

前言
CSS3文本
CSS3过渡

前言

CSS3是最新的CSS标准，里面增添了许多新特性，本文将介绍CSS3的文本与过渡新特性。

CSS3文本

CSS3的文本效果在从前的基础上，增加了一些新的属性，以下为一些新增的常用属性：

text-shadow：向文本添加阴影

text-shadow: h-shadow v-shadow blur color
水平阴影垂直阴影模糊距离阴影颜色
word-wrap：允许对长的不可分割的单词进行分割并换行到下一行

word-wrap:break-word | normal;
在长单词或 URL 地址内部进行换行|只在允许的断字点换行（浏览器保持默认处理）
text-overflow: 当文本溢出包含元素时发生的事情

text-overflow: clip|ellipsis|string;
修剪文本|显示省略符号来代表被修剪的文本|使用给定的字符串来代表被修剪的文本

div{
   width: 150px;
   height: 50px;
   /* float: left; */
   line-height: 50px;
   text-shadow: 2px 2px 5px black;
   white-space: nowrap;/*设置成单行文本 */
   overflow: hidden;/*溢出隐藏*/
}
#div1{
   background-color: lightsalmon;
   word-wrap: normal;
   text-overflow: clip;
}
#div2{
   background-color: lightskyblue;
   word-wrap: break-word;
   text-overflow: ellipsis;
}

    <div id="div1">有文本阴影，只在允许的断字点换行，文本溢出后修剪</div>
    <div id="div2">有文本阴影，在长单词内部换行，文本溢出后显示省略号代表修剪的文本</div>

CSS3文本新特性

CSS3过渡

CSS3中新增了过渡的效果，常用的属性如下：

transition：复合属性，用于在一个属性中设置四个如下过渡属性
transition-property：设置应用过渡的 CSS 属性的名称
transition-duration：设置过渡效果花费的时间，默认是 0
transition-timing-function：设置过渡效果的时间曲线，默认是 “ease”
transition-delay：设置过渡效果的开始时间，默认是 0

div{
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    background-color: lightsalmon;
    color: lightskyblue;
    text-shadow:2px 2px 5px black;
    transition: width 2s,height 2s,line-height 2s,background-color 2s;
}
/* 鼠标移入发生过渡 */
div:hover{
    width: 300px;
    height: 300px;
    line-height: 300px;
    background-color: lightpink;
}