技術標籤：前端學習csscss3前端

七.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中新增了過渡的效果，常用的屬性如下：

• 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;
}

以上為本萌新個人總結，如有不當之處望指正，有問題可以聯絡
郵箱：[email protected]或
QQ：2635591841

更於2021.2.1