html5中關於新增的幾個背景屬性和文字屬性介紹

一、背景圖片顯示：

①background-size：規定背景圖片的大小；

值：像素值、百分比、auto、cover、contain

#②background -origin ：規定背景圖片的起始位置；

值：padding-box(預設)、content-box、border-box

③background-clip

值： padding-box、content-box、border-box(預設)

二、HSLA：

新增顏色屬性；

##H：色調

S：飽和度

L：亮度

A：透明度

 

三、新增漸層顏色：

radial-gradient：(*position（deg），color percentage，color percentage)；径向渐变
linear-gradient：(*position，color percentage，color percentage)；线性渐变

四、新增倒影：

-webkit-box-reflect：(direction，offset，color(可线性)，url)

五、MASKS遮罩、蒙版：

-webkit-mask：(url，repeat，position，size)

六、自訂字體：

@font-face{
　　font-family：'iconfont'；定义字体名
　　src：url(‘iconfont.tff’)；加载字体
}

七、多行文字省略號：（共四行css）

-webkit-box-orient:vertical  =>文本垂直显示
-webkit-line-clamp:3  =>显示 3 行文本
display:webkit-box  =>弹性盒模型
overflow:hidden  =>溢出隐藏

 

八、文字陰影：（可複合使用）

text-shadow：offsetX，offsetY，模糊距離，顏色

以上是html5中關於新增的幾個背景屬性和文字屬性介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！