一： background- 新屬性
1.
如何給同一個元素定義兩個背景圖像
background-image:url(../images/t.png),url(../images/a.png)
background-position:left center , right center;? ? ? ? ? ? ? ?
background-repeat:no-repeat;
2.
指定背景圖像的位置區(qū)域(了解)
background-Origin? 指定背景圖像的位置區(qū)域,可以位于 border? 混萝、padding 、也可以在content
3.
背景裁剪屬性是從指定位置開繪制(了解)
background-clip
二： 漸變? ? ? ? ?
(瀏覽器支持不是很好,可能無法顯示時用: -ms-? -o-? -m0z-? -webkit-)
分兩種:? ? ? ?
線性漸變:linear-gradient? (橫著)? ? ? ? ? ? ? ? ? ? ? 至少定義兩種顏色值
徑向漸變radial -gradient? （豎著）
1. 線性漸變：
寫法: background:linear-gradient(red,blue);? 至少兩種顏色
線性漸變,顏色從左到右的寫法
background: linear-gradient(to right,red,blue);? to right? 定義了? 第一個顏色向 右 過渡萍恕。
background:linear-gradient(to bottom right,red,blue);? ? 對角漸變,? 第一個顏色向 右下過渡逸嘀。
同樣,可以使用角度,來做漸變效果。 寫法:
background:linear-gradient(角度,red允粤，blue);
即 0deg 將創(chuàng)建一個從左到右的漸變崭倘，90deg 將創(chuàng)建一個從下到上的漸變。
重復(fù)的線性漸變? ? ? ? ? %定義顏色的寬度
background: repeating-linear-gradient(to right,red,blue 10%,green 20%)
2. 徑向漸變:(理解為有某個點向四周擴散)
background: radial-gradient(red,yellow,green);
也可加入%定義大小
background: radial-gradient(red 20%,yellow 50%,green 3%);
徑向漸變有兩個值,規(guī)定的漸變是圓形還是橢圓,默認(rèn)值市橢圓形
circle? 定義圓形,? ? 默認(rèn)值? ellipse 橢圓形
background: radial-gradient(red,yellow,green);
重復(fù)的徑向漸變
background:repeating-radial-gradient(red,yellow,blue)
三： 文本效果
text-shadow box-shadow text-overflow word-wrap word-break
1.text-shadow:? 與box-shadow作用差不多,? 應(yīng)以了 文本的陰影效果,可以做成文字的3D感覺
如何控制文本的溢出:
text-overflow:hidden;? 文本溢出隱藏
text-overflow:ellipsis;? 定義文本多出的內(nèi)容省略號顯示
文本換行:
word-wrap:break-word;? 例如:英文,換行時,整個單詞換行类垫。
word-wrap:break-all;? ? ? ? 單詞拆分換行司光。
四： 字體
@font-face
