CSS3新特性

拉勾前端導師---小鹿老師發表於2020-10-10

CSS3 新增子級選擇器

CSS3中，相對於CSS2.1版本的7個選擇器（4個基礎選擇器，3個高階選擇器），增加了更多其他的選擇器，實現了更多的選擇方式

子級選擇器用於選取帶有特定父元素的元素。
書寫語法：element1 > element2
- 選擇的是element1的子級element2
- 如果element2元素不是父元素element1的直接子元素，則不會被選擇。
> 符號之前書寫父級的選擇器，> 符號之後書寫子級的選擇器，必須滿足父子級關係才能選中標籤

div > p {
    color: red;
}

CSS3 新增兄弟選擇器

選擇器	簡介
element1 + element2	匹配同一個父元素中緊跟在element1後面的一個element2元素
element1 ~ element2	匹配同一個父元素中在element1後面的所有element2元素

相鄰兄弟選擇器

相鄰兄弟選擇器可以用於選擇緊接在另一個元素後的兄弟元素，而且二者有相同的父元素
書寫語法：E1 + E2
- 選中的是緊跟在E1後邊的同級元素E2
- 只能選中緊跟在後面的一個E2元素
- 二者有相同的父元素
- + 符號前後可以新增空格

h1 + p {
    color: red;
}

其他兄弟選擇器

其他兄弟選擇器匹配同一個父元素中在E1後面的所有E2元素
書寫語法：E1 ~ E2
- 選擇E1之後出現的所有的E2
- 兩種元素必須擁有相同的父元素，但是E2不必直接緊隨E1

h2 ~ p {
    color: red;
}

CSS3 新增結構偽類選擇器一

選擇器	簡介
E:first-child	匹配父元素中的第一個子元素E
E:last-child	匹配父元素中的最後一個子元素E
E:nth-child(n)	匹配父元素中的第n個子元素E
E:first-of-type	指定型別E的第一個
E:last-of-type	指定型別E的最後一個
E:nth-of-type(n)	指定型別E的第n個

<style>
    .box :first-child {
        background-color: rgb(255, 0, 0);
    }
    .box :last-child {
        background-color: rgb(55, 0, 255);
    }
    .box :nth-child(2) {
        background-color: rgb(0, 255, 55);
    }
</style>

<body>
    <div class="box">
        <h1>一級標題</h1>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <p>段落4</p>
        <p>段落5</p>
    </div>
</body>

nth-child(n)
- n可以是數字，關鍵字和公式
- n如果是數字，就是選擇第n個
- 常見的關鍵詞even偶數，odd奇數
- 常見的公式如下（如果n是公式，則從0開始計算，n是從0，1，2，3…一直遞增）
- 但是第0元素或者超出了元素的個數會被忽略

公式	取值
2n	偶數
2n+1	奇數
5n	5、10、15......
n+5	從第5個開始（包含第五個）到最後，5、6、7、8、9......
-n+5	前五個（包含第五個）5、4、3、2、1、0......

CSS3 新增結構為類選擇器二

E:nth-child(n)和E:nth-of-type(n)的區別
- E:nth-child(n) — 匹配父元素的第n個子元素E，同時需要滿足兩個條件
- E:nth-of-type(n) — 匹配同型別中的第n個同級兄弟元素E，會忽視其他同級的非同型別元素。

CSS3 新增偽元素選擇器

選擇器	介紹
E::before	在E元素內部的前面插入一個元素
E::after	在E元素內部的後面插入一個元素
E::first-letter	選擇到了E容器內部的第一個字母
E::first-line	選擇到了E容器內部的第一行文字

H5寫法和傳統寫法的區別

單冒號 E:before
雙冒號 E::before
瀏覽器對以上寫法都能識別，雙冒號是h5的語法規範

偽元素的注意事項

微元素值只能給雙標籤新增，不能給單標籤新增
偽元素的冒號前不能有空格，如：E ::before 這個寫法就是錯誤的
偽元素裡面必須寫上屬性content:"";
before和after建立一個元素，但是屬於行內元素
因為在DOM裡面看不到剛才建立的元素，所以我們稱為偽元素

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屬性、且值中含有val的E元素

input[name] {
    color: red;
}

input[type="checkbox"] {
    color: red;
}

input[type^="check"] {
    color: red;
}

input[class^="icon"] {
    color: red;
}

input[class$="dan"] {
    color: red;
}

input[class*="on"] {
    color: red;
}

選擇器權重

基礎選擇器：id > 類 > 標籤 > *
偽類選擇器、屬性選擇器的權重等於類選擇器
偽元素選擇器的權重等於標籤選擇器

CSS3 盒模型

CSS3中可以通過box-sizing來指定盒模型，這樣我們就可以設定如何計算一個元素的總寬度和總高度

屬性值	簡介
content-box	預設值，標準盒子模型，盒模型是外擴的。width與height只包含內容的寬和高。在width和height之外繪製元素的內邊距和邊框。
border-box	guaiyimoshi1，盒模型是內減的。width和height屬性包括內容，內邊距和邊框，但不包含外邊距。為元素指定的任何內邊距和邊框都將在已設定的width和height內進行繪製。

content-box標準模式

Standard模式：標準模式中，盒子總體大小為width(height) + padding + border，內容區域是width和height部分

.box {
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 10px solid blue;
    box-sizing: content-box;
}

border-box怪異模式

Quirks模式：怪異模式中，盒子總體大小為width和height，新增了padding和border後，內容區域會收縮。

.box {
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 10px solid blue;
    box-sizing: border-box;
}

CSS3 邊框圓角屬性

屬性名：border-radius
作用：設定邊框的圓角
屬性值：可以是畫素值，或者百分比，百分比參考的是盒子整體寬度、高度的百分比。

屬性值	說明
x-radius / y-radius	/ 分割兩部分屬性值，前面為水平半徑，後面為垂直半徑，得到的是橢圓角
radius	一個屬性值，則水平和垂直都設定為同一個值，得到的是圓角

.box {
    width: 200px;
    height: 200px;
    background-color: red;
    /* border-radius: 100px/50px; */
    border-radius: 100px;
}

單一屬性

border-top-left-radius:半徑；
border-top-right-radius:半徑；
border-bottom-right-radius:半徑；
border-bottom-left-radius:半徑；

.box {
    width: 200px;
    height: 200px;
    background-color: red;
    border-bottom-right-radius:50px;
}

簡寫方法

border-radius相當於四個單一屬性的簡寫方法，類似padding也可以有四種值得寫法
- border-radius: 左上角右上角右下角左下角;
- border-radius: 左上角右上角和左下角右下角;
- border-radius: 左上角和右下角右上角和左下角;
- border-radius: 四個角相同;

.box {
    width: 200px;
    height: 200px;
    background-color: red;
    /* border-radius:50px 40px 30px 20px; */
    /* border-radius:50px 40px 30px; */
    /* border-radius:50px 40px; */
    border-radius:50px;
}

/的屬性值寫法

border-radius屬性值中出現了 / 斜線，那麼 / 前面可以設定水平方向四種值的寫法，/ 後面可以設定垂直方向四種值的寫法

.box {
    width: 200px;
    height: 200px;
    background-color: red;
    border-radius:50% 20% 40% / 20% 30%;
}

瀏覽器相容

Internet Explorer 8 及以下版本瀏覽器不支援border-radius屬性，其他瀏覽器都支援。

CSS3 文字陰影

在CSS3中，text-shadow可向文字應用陰影。通過屬性值能夠規定水平陰影、垂直陰影、模糊距離，以及陰影的顏色：

屬性值	簡介
h-shadow	必需。水平陰影的位置。允許負值。
v-shadow	必需。垂直陰影的位置。允許負值
blur	可選。模糊的距離
color	可選。陰影的顏色

文字陰影語法

text-shadow屬性向文字新增陰影，屬性值有2-3個長度值和一個可選的顏色值進行規定，省略的長度是0

.word {
    font: bold 20px/60px "微軟雅黑";
    text-shadow: 3px 3px 5px #f00;
}

多層陰影

text-shadow屬性也可以向文字新增多個陰影，逗號分隔多個陰影的屬性值。
注意：多陰影中，先寫的陰影壓蓋在後寫的陰影上

.word {
    font: bold 20px/60px "微軟雅黑";
    text-shadow: 3px 3px #f00,
    6px 6px #0f0,
    9px 9px #00f;
}

CSS3 盒子陰影

在CSS3中，box-shadow屬性用於對盒子邊框新增陰影

屬性值	簡介
h-shadow	必需。水平陰影的位置。允許負值。
v-shadow	必需。垂直陰影的位置。允許負值
blur	可選。模糊的距離
spread	可選。陰影的尺寸
color	可選。陰影的顏色
inset	可選。將外部陰影改為內部陰影

邊框陰影語法

box-shadow屬性向盒子新增陰影，屬性值有2-4個長度值、可選的顏色值以及可選得inset關鍵詞來規定，省略的長度是0

.box {
    bos-shadow: 20px 20px 5px 20px #f00 inset;
}

多層陰影

box-shadow屬性也可以向盒子新增多個陰影，逗號分隔多個陰影的屬性值。
注意：多陰影中，先寫的陰影壓蓋在後寫的陰影上

.box {
    box-shadow: 30px 30px #f00,
    50px 50px #0f0,
    70px 70px #00f;
}

CSS3 過渡屬性

動畫效果

CSS3出現之前，前端一般使用Flash動畫或JavaScript製作動畫
幀動畫：通過一幀一幀的畫面按照固定順序和速度播放，如電影膠片

過渡屬性

屬性名：transition
作用：在不使用Flash動畫或JavaScript的情況下，使用transition可以實現補間動畫（過渡效果）並且當前元素只要有“屬性”發生變化時即存在兩種狀態（我們用A和B代指）那麼A和B之間就可以實現平滑的過度的動畫效果。為了方便看效果，我們是用:hover切換狀態
語法格式：transition: 過渡的屬性過渡時間運動曲線延時時間

單一屬性寫法

屬性	描述
transition	簡寫屬性，用於在一個屬性中設定四個過渡屬性
transition-property	規定應用過渡的CSS屬性的名稱
transition-duration	定義過渡效果花費的時間。預設是0
transition-timing-function	規定過渡效果的時間曲線。預設是“ease”
transition-delay	規定過渡效果何時開始。預設是0

transition-property — 過渡的屬性
- none：表示沒有屬性過渡
- all：表示所有變化的屬性都過渡
- 屬性名：使用具體的屬性名，多個屬性名之間逗號分隔
時間
- 過渡時間：以s秒為單位。
- 延時時間：以s秒為單位。0s也必須加單位。
transition-timing-function — 時間曲線

屬性	描述
linear	規定以相同速度開始至結束的過渡效果
ease	規定慢速開始，然後變快，然後慢速結束的過渡效果
ease-in	規定以慢速開始的過渡效果
ease-out	規定以慢速結束的過渡效果
ease-in-out	規定以慢速開始和結束的過渡效果
cubic-bezier(x1,y1,x2,y2)	在cubic-bezier函式中定義自己的值。x1、x2取是0-1之間的數值，y1、y2取值任意，四個數值表示拉扯的點的兩個座標

.box {
    width: 100px;
    height:100px;
    background-color: red;
    /* transtion: all 2s linear 0s; */
    /* transtion: all 2s ease 0s; */
    transtion: all 2s ease-in 0s;
}
.box:hover {
    width: 300px;
}

瀏覽器相容
- Internet Explorer 10、Firefox、Chrome以及Opera支援transition屬性。
- Safari需要字首-webkit-
- 注意：Internet Explorer 9以及更早的版本，不支援transition屬性

2D 轉換-位移

屬性名：transform
作用：對原宿進行移動、縮放、轉動、拉長或拉伸。配合過渡和即將學習的動畫知識，可以取代大量之前只能靠Flash才可以實現的效果
屬性值：多種轉換方法的屬性值，可以實現不同的轉換效果
transform的屬性值為translate()時，可以實現位移效果
書寫語法：

值	說明
translate(x,y)	x,y分別為水平和垂直方向位移的距離，可以為px值或百分比，區分正負數
translate(x)	只有一個數值，表示水平方向的位移

.box {
    transform: translate(10,20)
}

2D 轉換-縮放

transform的屬性值為scale()時，可以實現元素縮放效果
書寫語法

值	說明
scale(x,y)	x,y分別為改變元素的寬度和高度的倍數
scale(n)	只有一個數值，表示寬度和高度同時縮放n倍
scaleX(n)	改變元素的寬度
scaleY(n)	改變元素的高度

.box {
    /* transform: scale(1.5, 2) */
    /* transform: scale(1.5) */
    /* transform: scaleX(1.5) */
    transform: scaleY(1.5)
}

2D 轉換-旋轉

transform的屬性值為rotate()時，可以實現元素旋轉效果
書寫語法：retate(數字deg)
- deg為讀書單位，正數表示順時針旋轉，負數表示逆時針旋轉。2D的旋轉只有一個屬性值
- 注意：元素旋轉後，座標軸也跟著發生轉變
- 因此，多個屬性值同時設定給transform時，書寫順序不同導致的轉換效果有差異

.box {
    /* transorm: rotate(30deg) */
    transorm: rotate(-30deg)
}

2D 轉換-傾斜

transform的屬性值為skew()時，可以實現元素旋轉效果
書寫語法：skew(數字deg, 數字deg)
- 兩個屬性值分別表示水平和垂直方向傾斜的角度，屬性值可以為正可以為負，第二個數值不寫預設為0

.box {
    /* transform: skew(30deg) */
    /* transform: skew(-30deg) */
    /* transform: skew(0, 30deg) */
    transform: skew(0, -30deg)
}

2D 轉換-基準點

transform-origin屬性
- 作用：設定調整元素的水平和垂直方向原點的位置
- 調整元素的基準點
- 屬性值：包含兩個，中間使用空格分隔

值	說明
x	定義x軸的原點在何處。可能的值：left、center、right、畫素值、百分比
y	定義y軸的原點在何處。可能的值：top、center、bottom、畫素值、百分比

.box {
    transform-origin: left top;
}

2D 轉換-卡包特效案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      position: relative;
      width: 225px;
      height: 150px;
      border: 1px solid #000;
      margin: 300px auto;
    }

    .box img {
      position: absolute;
      left: 0;
      top: 0;
      width: 225px;
      height: 150px;
      /* 設定公共的基準點 */
      transform-origin: right top;
      /* 過渡 */
      transition: all 1s ease;
    }

    .box:hover img:nth-child(1) {
      transform: rotate(60deg);
    }

    .box:hover img:nth-child(2) {
      transform: rotate(120deg);
    }

    .box:hover img:nth-child(3) {
      transform: rotate(180deg);
    }

    .box:hover img:nth-child(4) {
      transform: rotate(240deg);
    }

    .box:hover img:nth-child(5) {
      transform: rotate(300deg);
    }

    .box:hover img:nth-child(6) {
      transform: rotate(360deg);
    }
  </style>
</head>

<body>
  <div class="box">
    <img src="images/1.jpg">
    <img src="images/2.jpg">
    <img src="images/3.jpg">
    <img src="images/4.jpg">
    <img src="images/5.jpg">
    <img src="images/6.jpg">
  </div>

</body>

</html>

3D 轉換-透視perspective

3D轉換
- transform屬性不止能實現2D轉換，也可以製作3D立體轉換效果，比普通的x,y軸組成的平面效果多了一條z軸
透視
- 電腦螢幕是一個2D平面，影像之所以具有立體感（3D效果）其實只是一種視覺呈現，通過透視可以實現此目的
- 透視可以將一個2D平面，在轉換的過程當中，呈現3D效果
- 透視特點：近大遠小
- 注意：並非任何情況下都需要透視效果，根據開發需要進行設定，如果需要展示z軸的變化，則設定透視效果
透視屬性 — perspective
- 屬性名：perspective
- 作用：設定在z軸的視線焦點的觀察位置，從而實現3D檢視效果
- 屬性值：畫素值，數值越大，觀察點距離z軸原點越遠，圖形效果越完整且接近原始尺寸。
- 注意：透視屬性需要設定給3D變化元素的父級

.bigBox {
    perspective: 1000px;
}
.box {
    /* 可以給他設定3D動畫了 */
}

3D 轉換-旋轉

3D旋轉比2D旋轉更復雜，需要分別對三個方向的旋轉角度值：
屬性值：

值	說明
rotateX(angle)	定義沿著X軸的3D旋轉
rotateY(angle)	定義沿著Y軸的3D旋轉
rotateZ(angle)	定義沿著Z軸的3D旋轉

.bigBox {
    perspective: 1000px;
}
.box {
    /* transform: rotateX(30deg); */
    /* transform: rotateY(30deg); */
    transform: rotateZ(30deg);
}

3D 轉換-位移

屬性值

值	說明
translateX(x)	定義沿著X軸的位移值
translateY(y)	定義沿著Y軸的位移值
translateZ(z)	定義3D位移，設定Z軸的位移值

屬性值為畫素值或者百分比，正負表示位移的方向。正值向對應的正方向移動，負值向對應軸的負方向移動

.bigBox {
    perspective: 1000px;
}
.box {
    transform: translateX(300px);
    transform: translateY(300px);
    transform: translateZ(300px);
}

位移和旋轉可以同時設定，但是書寫順序會影響實際效果

3D 正方形案例

transform-style屬性

用於設定被巢狀的子元素在父元素的3D空間顯示，子元素會保留自己的3D轉換座標軸。
屬性值：
- flat：所有子元素在2D平面呈現
- preserve-3d：保留3D空間
3D元素構建是指某個圖形是由多個元素構成的，可以給這些元素的父元素設定transfrom-style: preserve-3d，來使其變成一個真正的3D圖形
一般來說，該屬性設定給3D變換圖形的父級元素

瀏覽器相容

Internet Explorer 10、Firefox以及Opera支援transform屬性
Chrome和Safari需要字首 -webkit-
Internet Explorer 9需要字首-ms-

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box {
			width: 200px;
			height: 200px;
			border: 1px solid #000;
			margin: 150px auto;
		}

		.stage {
			position: relative;
			width: 200px;
			height: 200px;
			border: 1px solid #000;
			/* 設定內部子元素在3D空間進行展示 */
			transform-style: preserve-3d;
			/* 透視 */
			perspective: 5000px;
			/* 過渡 */
			transition: all 4s ease;
		}

		.stage:hover {
			transform: rotateX(360deg) rotateY(360deg);
			-webkit-transform: rotateX(360deg) rotateY(360deg);
		}

		.stage div {
			position: absolute;
			left: 0;
			top: 0;
			width: 200px;
			height: 200px;
			font: bold 80px/200px "arial";
			text-align: center;
		}

		.stage div:nth-child(1) {
			background-color: rgba(255, 0, 0, 0.5);
			transform: translateZ(100px);
		}

		.stage div:nth-child(2) {
			background-color: rgba(0, 255, 0, 0.5);
			transform: rotateX(90deg) translateZ(100px);
		}

		.stage div:nth-child(3) {
			background-color: rgba(0, 0, 255, 0.5);
			transform: rotateX(180deg) translateZ(100px);
		}

		.stage div:nth-child(4) {
			background-color: rgba(255, 255, 0, 0.5);
			transform: rotateX(270deg) translateZ(100px);
		}

		.stage div:nth-child(5) {
			background-color: rgba(255, 0, 255, 0.5);
			transform: rotateY(90deg) translateZ(100px);
		}

		.stage div:nth-child(6) {
			background-color: rgba(0, 255, 255, 0.5);
			transform: rotateY(-90deg) translateZ(100px);
		}
	</style>
</head>

<body>
	<div class="box">
		<div class="stage">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
		</div>
	</div>
</body>

</html>

CSS3動畫

CSS3中提供了自己的動畫製作方法，這可以在許多網頁中取代動畫圖片、Flash動畫以及JavaScript

CSS3動畫製作分為兩步：建立動畫、繫結動畫

keyframes規則

@keyframes規則用於建立動畫
在@keyframes中規定某項CSS樣式，就能建立由從一種樣式逐漸變化為另一種樣式的效果
可以改變任意多的樣式任意多的次數
需要使用百分比來規定變化發生的時間，或用關鍵詞from和to，等同於0%和100%
0%是動畫開始，100%是動畫完成

keyframes書寫方法

@keyframes 動畫名稱 {
    /* 動畫過程，可以新增任意百分比的動畫細節 */
}

animation屬性

需要將@keyframes中建立的動畫繫結到某個選擇器，否則不會產生動畫效果。
animation屬性用於對動畫進行捆綁
語法：

div {
    animation: 動畫名稱 過渡時間 速度曲線 動畫次數 延時時間; 
    /* 必須設定動畫名稱和過度時間，其他屬性可以根據需求設定 */
}

單一屬性列表

屬性	描述
animation-name	規定@keyframes動畫的名稱
animation-duration	規定動畫完成一個週期所花費的秒或者毫秒。預設是0
animation-timing-function	規定動畫的速度曲線。預設是"ease"
animation-delay	規定動畫何時開始。預設是0
animation-iteration-count	規定動畫被播放的次數。預設是1。infinite表示無限次播放

瀏覽器相容

Internet Explorer 10、Firefox以及Opera支援@keyframes規則和animation屬性
Chrome和Safari需要字首 -webkit-
Internet Explorer 9及更早版本，不支援@keyframes規則和animation屬性

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin: 200px auto;
      background-color: skyblue;
      /* 新增繫結動畫 */
      /* animation: move 1s linear 3 2s; */
      animation: move2 3s linear infinite;
    }

    /* 自定義動畫，過程 */
    @keyframes move {

      /* 從頭開始，最好保持跟預設樣式的狀態一致 */
      from {
        transform: translateY(0);
      }

      /* 到結束位置 */
      to {
        transform: translateY(100px);
      }
    }

    /* 百分比定義動畫細節 */
    @keyframes move2 {
      0% {
        transform: translateY(0);
      }

      25% {
        transform: translateY(100px);
      }

      50% {
        transform: translateY(0);
      }

      75% {
        transform: translateY(-100px);
      }

      100% {
        transform: translateY(0);
      }
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

css3 新特性
2018-09-12
CSSS3
css3新特性總結
2019-02-17
CSSS3
css3新特性之動畫使用
2017-08-25
CSSS3動畫
個人總結（css3新特性）
2017-08-22
CSSS3
前端技術面——（CSS3新特性）
2018-10-05
前端CSSS3
CSS3 和 HTML5 新特性一覽
2019-04-24
CSSS3HTML
總結CSS3新特性(媒體查詢篇)
2015-07-16
CSSS3
HTML5 和 CSS3的新互動特性
2011-11-29
HTMLCSSS3
HTML5和CSS3中的互動新特性
2014-05-08
HTMLCSSS3
HTML5 & CSS3初學者指南(3) – HTML5新特性
2017-01-18
HTMLCSSS3
新特性
2020-12-06
Oracle11新特性——PLSQL新特性（七）
2007-09-26
OracleSQL
Oracle11新特性——PLSQL新特性（六）
2007-09-25
OracleSQL
Oracle11新特性——PLSQL新特性（五）
2007-09-23
OracleSQL
Oracle11新特性——PLSQL新特性（四）
2007-09-20
OracleSQL
Oracle11新特性——PLSQL新特性（三）
2007-09-19
OracleSQL
Oracle11新特性——PLSQL新特性（二）
2007-09-18
OracleSQL
Oracle11新特性——PLSQL新特性（一）
2007-09-17
OracleSQL
css3新UI
2015-10-31
CSSS3UI
【ORACLE新特性】11G 分割槽新特性
2014-03-12
Oracle
React 新特性
2019-03-07
React
新特性介面
2018-09-05
新特性方面
2007-12-31
CSS/CSS3語法新特性筆記
2022-03-06
CSSS3筆記
程式碼檢測HTML5/CSS3新特性的瀏覽器支援情況
2014-12-03
HTMLCSSS3瀏覽器
10G新特性筆記之安裝新特性
2007-11-11
筆記
Servlet 3.0 新特性
2020-02-12
Servlet
Go 1.13 新特性
2019-09-06
Go
Java 11新特性
2019-03-04
Java
PHP 7.4 新特性
2019-05-23
PHP
Java 17新特性
2021-09-08
Java
Prometheus 2.21.0 新特性
2021-09-17
Prometheus
Java 8 新特性
2018-12-12
Java
Hadoop新特性
2020-10-20
Hadoop
MySQL 8.0 新特性
2020-11-04
MySql
C++新特性
2021-01-03
C++
PostgreSQL 13–新特性
2020-12-01
SQL
Java 8 新特性
2022-06-08
Java

CSS3新特性

CSS3 新增子級選擇器

CSS3 新增兄弟選擇器

相鄰兄弟選擇器

其他兄弟選擇器

CSS3 新增結構偽類選擇器一

CSS3 新增結構為類選擇器二

CSS3 新增偽元素選擇器

H5寫法和傳統寫法的區別

偽元素的注意事項

CSS3 新增屬性選擇器

選擇器權重

CSS3 盒模型

content-box標準模式

border-box怪異模式

CSS3 邊框圓角屬性

單一屬性

簡寫方法

/的屬性值寫法

瀏覽器相容

CSS3 文字陰影

文字陰影語法

多層陰影

CSS3 盒子陰影

邊框陰影語法

多層陰影

CSS3 過渡屬性

動畫效果

過渡屬性

單一屬性寫法

2D 轉換-位移

2D 轉換-縮放

2D 轉換-旋轉

2D 轉換-傾斜

2D 轉換-基準點

2D 轉換-卡包特效案例

3D 轉換-透視perspective

3D 轉換-旋轉

3D 轉換-位移

3D 正方形案例

transform-style屬性

瀏覽器相容

CSS3動畫

keyframes規則

keyframes書寫方法

animation屬性

瀏覽器相容

相關文章