css3 背景的新增屬性
1、background-origin 背景原點
說明:指定background-origin屬性應該是相對位置屬性值:padding-box 背景影象填充框的相對位置
border-box 背景影象邊界框的相對位置
content-box 背景影象的相對位置的內容框
注:預設值為:padding-box;
2、background-clip 背景裁切
說明:background-clip 屬性規定背景的繪製區域。屬性值:border-box 背景被裁剪到邊框盒。
padding-box 背景被裁剪到內邊距框。
content-box 背景被裁剪到內容框
注:預設值:border-box;
3、background-size 背景尺寸
說明:background-size 規定背景影象的尺寸屬性值:length
規定背景圖的大小。第乙個值寬度,第二個值高度。
percentage(%)
以百分比為值設定背景圖大小
cover
把背景影象擴充套件至足夠大,以使背景影象完全覆蓋背景區域
contain
把影象影象擴充套件至最大尺寸,以使其寬度和高度完全適應內容區域。
4、css3多背景屬性
eg:p
css3 顏色特性
1、rgba 顏色模式
2、 hsl 顏色模式(了解)
3、 hsla 顏色模式(了解)
css3 邊框的新增屬性
1、border-color
eg:border-color:red green #000 yellow;(上右下左)
2、border-image
border-image 屬性是乙個簡寫屬性,用於設定以下屬性:
border-image-source 用在邊框的的路徑。
border-image-slice 邊框向內偏移。
border-image-repeat 影象邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)
border-image-outset 邊框影象區域超出邊框的量
3、border-radius 圓角邊框
(1).box
#formatimgid_0#
(2).div1
#formatimgid_1#
以斜槓/分開後面的引數:
第乙個引數表示圓角的水平半徑,第二個引數表示圓角的垂直半徑
(3).div1
#formatimgid_2#
按順時針的順序,斜槓/左邊是四個圓角的水平半徑,右邊是四個圓角的垂直半徑,但是通常我們很少寫右邊的引數,那就是預設右邊等於左邊的值。
4、box-shadow 盒子陰影
屬性值:
eg:box-shadow: 10px 10px 5px #888888
HTML5 快取 CSS3動畫
1 語義標籤 2 增強性表單 4 canvas 繪圖 5 svg繪圖 6 地理定位 7 拖放api 8 web worker 9 web storage 10 websockket 處理html5新標籤的瀏覽器相容問題?1 使用document.createelement tag 來解決 2 使用h...
css3和html5的基礎
流式布局 應對視窗大小做等比例縮放布局 簡單來說利用百分數來進行布局 css3的box sizing與calc 通常設定邊框會被設定在元素的外圍 box sizing屬性值設為border box時邊框就加在元素內部 css3中在進行響應式布局時需要對不不同的螢幕大小設定不同的div排序方式。這時候...
html5和css3新特性
1易用簡潔 指令碼和連線無需type html5新增加的一些標籤和特性如下 1.無需寫type,指令碼和連線 2.新增加標籤標記元素mark高亮顯示 audio video 如下figure input新增屬性 placeholder required autofocus 新增正規表示式在input...