CSS3知識總結

七、css3屬性選擇器(上)

什麼是css3

css3發展現狀

屬性選擇器列表

類選擇器、屬性選擇器、偽類選擇器5的權重是10

​屬性選擇器**演示

button

button[disabled]

**演示

input[type=search]

span[class^=black]
span[class$=black]
span[class*=black]

屬性列表

**演示

ul li:first-child

ul li:last-child
ul li:nth-child(3)

nth-child 詳解

**演示

**演示

十二、偽元素選擇器

偽類選擇器

​

**演示

三、偽元素的案例

新增字型圖示

p

p::after

translate語法

transform

:translate
(x, y)
transform
:translatex
(n)transfrom
:translatey
(n)

**演示

div

五、讓乙個盒子水平垂直居中

十六、2d 轉換 rotate

rotate 旋轉

rotate語法

/* 單位是：deg */

transform
:rotate
(度數)

**演示

img:hover

CSS3 知識點總結

1.border radius border radius設定的值越大，弧度越大，可以用具體數值10px來設定，也可以用20 百分比來設定 你也可以只設定乙個或其中幾個角的弧度，就像這樣 div 2.box shadow 用來設定乙個下拉陰影得框，語法如下 box shadow h shadow v...

CSS3相關知識總結

moz代表firefox瀏覽器私有屬性 ms代表ie瀏覽器私有屬性 webkit代表safari chrome私有屬性 o代表歐朋 opera 核心識別碼 參考文章 布局的傳統解決方案，基於盒狀模型，依賴 display屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，...

CSS3 總結（二十） 彈性盒子（CSS3）

2.在彈性容器中可以設定min width max width屬性來限制彈性子元素的最小及最大縮放寬度。用在彈性容器 3.flex direction 屬性 用在彈性容器 指定了彈性子元素在父容器中的位置。值說明 row橫向從左到右排列 左對齊 預設的排列方式。row reverse 反轉橫向排列 ...