HTML5培訓課件 CSS3新增屬性拿走不謝

2021-09-18 01:46:43 字數 1447 閱讀 8230

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...