css3系列 概述

css3分成了不同類別，稱為「modules」。而每乙個「modules」都有於css2中額外增加的功能，以及向後相容。css3早於2023年已經開始制訂。[18]

直到2023年6月7日，css 3 color module終於發布為w3c recommendation。[19]

css3裡增加了不少功能，如：「border-radius」、「text-shadow」、「transform」以及「transition」。css3亦支援動畫（animation）及立體（preserved-3d）。

部分屬性（例如旋轉類屬性（如：transform），動畫類屬性，立體類屬性），由於現時不同瀏覽器支援程度不同，需要加上不同的瀏覽器字首來區分

我們看乙個css3的例子

doctype html

>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>css3旋轉元素
title
>
<
style
>
div 
div#div2 
style
>
head
>
<
body
>
<
div>
這是乙個div元素
div>
<
div 
id="div2"
>這是乙個旋轉後的div元素
div>
body
>
html
>

這是乙個旋轉元素的例子，這裡使用了transform屬性,該屬性允許我們對元素進行,旋轉,縮放，移動或傾斜

css3 動畫系列（一）

其實w3c上的教程已經很清楚了，我也建議大家去看看w3c上的教程 1 使用js對dom節點操作進行變換會帶來大量重排 重繪，使得頁面效能不佳 2 css3 動畫啟用的是硬體加速 gpu 而且對gpu的消耗很小 主要的的有點就是以上兩點了。至於缺點，就是相容性的問題。可能你為了寫乙個小動畫要寫幾十行甚...

WEB之CSS3系列筆記

選擇符 簡介e att 選擇具有att屬性的e元素 e att val 選擇具有att屬性且屬性值為val的e元素 e att val 匹配具有att屬性,且值以val開頭的e元素 e att val 匹配具有att屬性,且值以val借位的e元素 e att val 匹配具有att屬性,且值中含有v...

css3新動 CSS3 動畫

注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...