首頁 web前端 前端問答 h5和css3有哪些新特性

h5和css3有哪些新特性

Jul 27, 2021 pm 05:20 PM
css3 h5

h5新功能:拖曳釋放API、語意化標籤、音訊和視訊API、畫布API、地理API、表單控制項等。 css3新特性:1、RGBA和HSLA;2、text-shadow;3、border-radius和box-shadow、box-sizing等。

h5和css3有哪些新特性

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

html5是建構Web內容的一種語言描述方式。 html5是網路的下一代標準。 css3是css(層疊樣式表)技術的升級版本。下面我們來看看HTML5餘css3的新功能。

CSS3新特性:

1.顏色:新增RGBA,HSLA模式

2. 文字陰影(text-shadow)

3.邊框: 圓角(border-radius)邊框陰影: box-shadow

#4. 盒子模型:box-sizing

5. 背景:background-size 設定背景圖片的尺寸background-origin 設定背景圖片的原點

background-clip 設定背景圖片的裁切區域,以”,”分隔可以設定多背景,用於自適應佈局

6.漸變:linear-gradient、radial-gradient

7.過渡:transition,可實現動畫

#8. 自訂動畫

9. 在CSS3中唯一引入的偽元素是::selection.

10.媒體查詢,多欄佈局

11. border-image

12.2D轉換:transform:translate(x,y) rotate (x,y) skew(x,y) scale(x,y)

13. 3D轉換

CSS3新增偽類別:

#p:first-of-type 選擇屬於其父元素的首個

元素的每個

元素。

p:last-of-type 選擇屬於其父元素的最後

元素的每個

元素。

p:only-of-type 選擇屬於其父元素唯一的

元素的每個

元素。

p:only-child 選擇屬於其父元素的唯一子元素的每個

元素。

p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個

元素。

:enabled、:disabled 控製表單控制項的停用狀態。

:checked,單選方塊或複選框被選取。

html5 新功能:

1. 拖曳釋放(Drag and drop) API

2. 語意化更好的內容標籤(header ,nav,footer,aside,article,section)

3. 音訊、視訊API(audio,video)

4. 畫布(Canvas) API

#5. 地理(Geolocation) API

6. 本地離線儲存 localStorage 長期儲存數據,瀏覽器關閉後資料不遺失;

7. sessionStorage 的資料在瀏覽器關閉後自動刪除

8. 表單控件,calendar、date、time、email、url、search

9. 新的技術webworker, websocket, Geolocation

更多程式相關知識,請造訪:程式設計入門! !

以上是h5和css3有哪些新特性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

純CSS3怎麼實現波浪效果? (程式碼範例) 純CSS3怎麼實現波浪效果? (程式碼範例) Jun 28, 2022 pm 01:39 PM

純CSS3怎麼實現波浪效果?這篇文章就來跟大家介紹一下使用 SVG 和 CSS 動畫來製作波浪效果的方法,希望對大家有幫助!

巧用CSS實現各種奇形怪狀按鈕(附代碼) 巧用CSS實現各種奇形怪狀按鈕(附代碼) Jul 19, 2022 am 11:28 AM

這篇文章帶大家看看怎麼使用 CSS 輕鬆實現高頻出現的各類奇形怪狀按鈕,希望對大家有幫助!

css怎麼隱藏元素但不佔空間 css怎麼隱藏元素但不佔空間 Jun 01, 2022 pm 07:15 PM

兩種方法:1、利用display屬性,只要為元素加上「display:none;」樣式即可。 2.利用position和top屬性設定元素絕對定位來隱藏元素,只需為元素加上「position:absolute;top:-9999px;」樣式。

h5是指什麼 h5是指什麼 Aug 02, 2023 pm 01:52 PM

H5是指HTML5,是HTML的最新版本,H5是一個功能強大的標記語言,為開發者提供了更多的選擇和創造空間,它的出現推動了Web技術的發展,使得網頁的交互和效果更加出色,隨著H5技術的逐漸成熟和普及,相信它將在互聯網的世界中發揮越來越重要的作用。

css3怎麼實現花邊邊框 css3怎麼實現花邊邊框 Sep 16, 2022 pm 07:11 PM

在css中,可以利用border-image屬性來實作花邊邊框。 border-image屬性可以使用圖片來建立邊框,即給邊框加上背景圖片,只需要將背景圖片指定為花邊樣式即可;語法「border-image: url(圖片路徑) 向內偏移值圖像邊界寬度outset 是否重複;」。

css3如何實現滑鼠點擊圖片放大 css3如何實現滑鼠點擊圖片放大 Apr 25, 2022 pm 04:52 PM

實作方法:1、使用「:active」選擇器選取滑鼠點擊圖片的狀態;2、使用transform屬性和scale()函數實現圖片放大效果,語法「img:active {transform: scale(x軸放大倍率,y軸放大倍率);}」。

原來利用純CSS也能實現文字輪播與圖片輪播! 原來利用純CSS也能實現文字輪播與圖片輪播! Jun 10, 2022 pm 01:00 PM

怎麼製作文字輪播與圖片輪播?大家第一想到的是利用js,其實利用純CSS也能實現文字輪播與圖片輪播,下面來看看實作方法,希望對大家有幫助!

如何區分H5,WEB前端,大前端,WEB全端? 如何區分H5,WEB前端,大前端,WEB全端? Aug 03, 2022 pm 04:00 PM

本文帶你快速區分H5、WEB前端、大前端、WEB全棧,希望對需要的朋友有幫助!

See all articles