css3 ?就是css2 的一個升級版本。css2 是用來做效果渲染的，而css3 可以使做出來的效果更佳豐富。 C3有兼容性問題，移動端支持稍微要好些. ? ? ? 堅持以下原則： ? ? ? ? ? ? ? ? （1）漸進增強 ? ? ? ? ? ? ? ? （2）添加私有前綴 ? ? ? ? ? ? ? ? （3）考慮用戶群體 【 選擇器 】css3 在之前的基礎上面擴展了三種類型的選擇器 （獲取到一個元素有多重方式，我們要控制頁面上面的元素，必須先得到頁面上面的元素,假設你的頁面的層級結構比較復雜的時候） （1）屬性選擇器 a[href] 所有的a 標簽，這個a需要有 href 屬性 a[href='demo'] ?所有的a 標簽，這個a需要有 href=demo a[href*='demo'] 包含demo a[href^='demo'] ?以demo 開始 a[href$='demo'] demo ?結束 （2）偽類選擇器 a:active ?a:link ?a:hover a:visited 新增: li:first-child li:last-child li:nth-child() 根據n 去取值,索引是從1開始計算 li:nth-last-child 從后向前計算，倒著算 n 的用法. 取值0,1,2,3,4... empty 空的. div:empty ? 選中沒有子元素的div div:target 結合錨點進行使用，處于當前錨點的元素會被選中； （3）偽元素選擇器 我們的偽元素選擇器是:: 兩個 before: 想元素里面添加一個子元素，這個資源在最前面（它默認是一個行內元素，我們需要轉換成一個塊元素，必須設置content:''） after: 想元素里面添加一個子元素，這個資源在最后面 first-letter 選中第一個字或者字母。 first-line 選中第一行 ::selection 可改變選中文本的樣式； 1 //選中.demo 的父元素下面的第二個子元素，并且這個子元素有一個class 屬性，它的的值是demo 2 .demo:nth-child(2){
3 } （4）有兩種新增方式可以表示顏色 rgba （ red，green，blue，Alpha 透明通道） hsla（Hue 色調，Saturation 飽和度，Lightness 亮度，Alpha 透明度） 如果給父盒子設置了透明度，子盒子會繼承父盒子的透明度；新增的顏色的標識方式里面，支持設置透明，而且設置的透明不會影響到子盒子；我想實現半透明的效果，我就可以使用 rgba,hsla 顏色的表示方式. （5）text-shadow?可以設置文本陰影，實際上就是給文本添加影子.. text-shadow:1px 1px 1px red; 第一個1px 向右移動，負值的是向左移動（正值向右偏移，負值向左偏移） 第二個1px 向下移動 ，負值是向上移動(正值是向下偏移，負值向上偏移) 第三個1px 向下移動 ?代表的是模糊度，，不能為負數，值越大，越模糊（模糊度，不能為負數，值越大，模糊度越高） 第四個red 代表模糊的顏色. 影子的顏色. text-shadow:1px 1px 1px red,-1px -1px 1px red // ?可以為文本添加多個影子 （6）盒子模型 我們可以改變盒子計算寬高的方式，通過設置盒子的這個屬性 ?box-sizing:content-box/border-box content-box 盒子的高度以及寬度 ?盒子的寬度=width+padding+border border-box ?盒子的高度以及寬度 ?盒子的高度以及寬度=width —————————————————————————————————————————— 【 邊框圓角 】 border-radius:
1:正圓
2：橢圓 x 軸 ，y 軸的概念.
3:android 機器人
4:小機器貓.
box-shadow 邊框陰影；可以設置邊框的陰影，外陰影，內陰影.
border-image:
1:我們可以為邊框設置圖片，之前設置的都是背景色 而現在我們可以為四個邊設置邊框圖片。
我們只需要一張圖，瀏覽器會自動幫我們進行裁剪。然后我們還可以指定寬度
指定邊框圖片的平鋪方式. 1：border-image-source 邊框圖片的路徑
2：border-image-slice 裁剪的方式
3: border-image-width 邊框的寬度
4: border-image-repeat:round,stretch,repeat
【 漸變 】
線性漸變:
liner-gradient(
135deg, 需要有一個角度. (順時針方向)
yellow 25%, 起始顏色
green 50% 終止顏色
)
徑向漸變：一個中心點，朝著四周進行漸變
radius-gradient(
100px at center center 半徑 at 中心點的位置
yellow 起始顏色
green 終止顏色
)
【 背景 】
背景尺寸：
我們可以為一個div 設置背景，
1：假設我的背景圖片的大小超過了盒子的大小.
我們顯示的背景不全面
我們這個時候可以設置背景的大小與盒子的大小一致.
但是我們不能做到盒子變大，背景變大
background-size:contain cover
contain: 背景圖片始終完全顯示，等比例縮放.
cover: 也會縮放，背景始終填充整個區域 背景原點:
background-origin: 可以設置背景圖片的位置.
background-origin:border-box,padding-box,content-box; border-box 背景的原點在border 上面
padding-box 背景的原點在內邊距上面
content-box 背景的遠在content 內容區域 背景裁剪：
background-clip: border-box,padding-box,content-box;
多重背景：
url("images/bg1.png") left top no-repeat,
url("images/bg2.png") right top no-repeat,
url("images/bg3.png") right bottom no-repeat,
url("images/bg4.png") left bottom no-repeat,
url("images/bg5.png") center center no-repeat;
【 過渡 】 我們要完成過渡，我們需要使用一個transition這樣的一個屬性
1：補間動畫
開始狀態，結束狀態
2：幀動畫 transition: all 5s linear 過渡延遲多少秒執行
（1）設置過渡的屬性 （all） linear 勻速
（2）過渡時間 ease-in
（3）過渡的速度 ease-out

———————————————————————————————————————————————————————————————————————————————————————— 【 過渡 】（transtion:all 2s linear 3s;） transition 屬性
all 需要過渡的屬性
2s 過渡這些屬性需要執行的時間
linear 過渡的速度
4s 延遲多少秒
【 2D——3D轉換 】 我們2d 轉換和3d 轉換，我們都可以使用transform 屬性
2d 轉換
我們有三種轉換效果
① scale(1.5,2) 放大 大于1；縮小 小于1
② translate(200px,200px) 向水平方向移動，垂直方向移動，可以接受負值（負值是反方向，百分比）
③ rotate() 正值順時針方向，負值是逆時針方向
???? transform-origin 旋轉的中心點的位置；默認的中心點在中間
????3d:轉換
掌握一個坐標系，有了x軸，y軸，z 軸的概念。此外，我們想在一個平面實現3d 的效果，我們使用到了透視.. ① x軸，z軸，y軸的方向 tranlateX(200px) 水平向右移動
② 圍繞x，y，z 軸旋轉，角度，旋轉.
③ 旋轉的中心點.
立體盒子：每一個平面（盒子）都對應一個3d 坐標系 透視：觀察者與目標物的距離 ，設置了這個距離之后，我們就可以透過透視產生立體的效果
transform-origin 旋轉的終點的位置
transform-style:preserve-3d （把子元素放在一個3維空間內） 【 動畫 】 有一個animation屬性 （這里有八個值）
1:我要執行那個動畫，名稱
2:執行動畫需要花費的時間
3:速度，執行動畫的方式. steps()
4:延遲多少秒執行動畫
5:循環的次數.
6:是否交替執行動畫.
7:動畫結束的狀態.
8:動畫的暫時，運行狀態. animation 屬性: move （動畫的 名稱） —— animation:move 10s linear ????動畫執行的時間 動畫的速度
延遲時間
循環的次數
動畫是否交替的效果 alternate
動畫的結束狀態 forward
動畫的狀態 running paused 1 // 定義動畫 2 @keyfreames move{ 3 from{ 4 } 5 to{ 6 } 7 } 1 // 我們在做動畫的時候我們定義一組動畫 2 @keyfreames move{ 3 0%{ 4 } 5 20%{ 6 } 7 40%{ 8 } 9 80%{ 10 } 11 100%{ 12 } 13 }

?

——————————————————————————————————————————————————

?

1、伸縮布局

CSS3在布局方面做了非常大的改進，使得我們對塊級元素的布局排列變得十分靈活，適應性非常強，其強大的伸縮性，在響應式開中可以發揮極大的作用。

如下圖：

主軸：Flex容器的主軸主要用來配置Flex項目，默認是水平方向

側軸：與主軸垂直的軸稱作側軸，默認是垂直方向的

方向：默認主軸從左向右，側軸默認從上到下

主軸和側軸并不是固定不變的，通過flex-direction可以互換。

?

（1）必要元素：

a、指定一個盒子為伸縮盒子?display: flex

b、設置屬性來調整此盒的子元素的布局方式 例如?flex-direction

c、明確主側軸及方向

d、可互換主側軸，也可改變方向

（2）各屬性詳解

a、flex-direction調整主軸方向（默認為水平方向）

b、justify-content調整主軸對齊

c、align-items調整側軸對齊

d、flex-wrap控制是否換行

e、align-content堆棧（由flex-wrap產生的獨立行）對齊

f、flex-flow是flex-direction、flex-wrap的簡寫形式?flex-flow: cloumn wrap

g、flex子項目在主軸的縮放比例，不指定flex屬性，則不參與伸縮分配

h、order控制子項目的排列順序，正序方式排序，從小到大

此知識點重在理解，要明確找出主軸、側軸、方向，各屬性對應的屬性值可參考示例源碼

2、多列布局

類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。

了解即可，實際意義不大。

?

3、Web字體

3.1?字體格式

不同瀏覽器所支持的字體格式是不一樣的，所以我們有必要了解一下有關字體格式的知識。

1、TureType(.ttf)格式

.ttf字體是Windows和Mac的最常見的字體，是一種RAW格式，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

2、OpenType(.otf)格式

.otf字體被認為是一種原始的字體格式，其內置在TureType的基礎上，支持這種字體的瀏覽器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；

3、Web Open Font Format(.woff)格式

woff字體是Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支持元數據包的分離，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

4、Embedded Open Type(.eot)格式

.eot字體是IE專用字體，可以從TrueType創建此格式字體，支持這種字體的瀏覽器有IE4+；

5、SVG(.svg)格式

.svg字體是基于SVG字體渲染的一種格式，支持這種字體的瀏覽器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

了解了上面的知識后，我們就需要為不同的瀏覽器準備不同格式的字體，通常我們會通過字體生成工具幫我們生成各種格式的字體，因此無需過于在意字體格式間的區別差異。

推薦http://www.zhaozi.cn/、http://www.youziku.com/?查找更多中文字體

3.2?字體圖標

其實我們可以把文字理解成是一種特殊形狀的圖片，反之我們是不是也可以把圖片制作成字體呢？

答案是肯定的。

常見的是把網頁常用的一些小的圖標，借助工具幫我們生成一個字體包，然后就可以像使用文字一樣使用圖標了。

優點：

1、將所有圖標打包成字體庫，減少請求；

2、具有矢量性，可保證清晰度；

3、使用靈活，便于維護；

Font Awesome?使用介紹

http://fontawesome.dashgame.com/

定制自已的字體圖標庫

http://iconfont.cn/

https://icomoon.io/

SVG素材

http://www.iconsvg.com/

?

轉載于:https://www.cnblogs.com/DF-fzh/p/5592248.html

總結

以上是生活随笔為你收集整理的CSS3的笔记总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。