Web基礎之CSS3

概述：css3完全向後兼容,不需要改變已有設計。瀏覽器通常支持 CSS2。CSS3被劃分成模塊，【-moz- , -o- , -webkit-】有：1）選擇器2）框模型

3）背景：

—>屬性： ->：background-size：規定背景圖片的尺寸。 ->：background-origin：規定背景圖片的定位區域。 ->：background-clip：規定背景的繪製區域。背景圖片可以放置於 content-box、padding-box 或 border-box 區域。

div{ #背景圖片進行拉伸，使其完成填充內容區域 background:url(bg_flower.gif); -moz-background-size:40% 100%; /* 老版本的 Firefox */ background-size:40% 100%; background-repeat:no-repeat;}

div{ #在 content-box 中定位背景圖片
background:url(bg_flower.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;}

body{ # 多重背景圖片，為 body 元素設置兩幅背景圖片
background-image:url(bg_flower.gif),url(bg_flower_2.gif);}

4）邊框：

—>屬性： ->： border-radius ：設置所有四個 border-*-radius 屬性的簡寫屬性。 ->： box-shadow ：向方框添加一個或多個陰影。

->： border-image ：設置所有 border-image-* 屬性的簡寫屬性。

div{ #圓角邊框 border:2px solid; border-radius:25px; -moz-border-radius:25px; /* Old Firefox */}

div{ #方框陰影
box-shadow: 10px 10px 5px #888888;}

div{ #使用圖片做邊框
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */}

5）文本效果：

—>屬性： ->：hanging-punctuation：規定標點字元是否位於線框之外。 ->：punctuation-trim：規定是否對標點字元進行修剪。 ->：text-align-last：設置如何對齊最後一行或緊挨著強制換行符之前的行。 ->：text-emphasis：向元素的文本應用重點標記以及重點標記的前景色。 ->：text-justify：規定當 text-align 設置為 "justify" 時所使用的對齊方法。 ->：text-outline：規定文本的輪廓。

->：text-overflow：規定當文本溢出包含元素時發生的事情。

->：text-shadow：向文本添加陰影。 ->：text-wrap：規定文本的換行規則。 ->：word-break：規定非中日韓文本的換行規則。 ->：word-wrap：允許對長的不可分割的單詞進行分割並換行到下一行。 —>字體：可將使用的字體文件存放到 web 伺服器上，它會在需要時被自動下載到用戶的計算機上。您「自己的」的字體是在 CSS3 @font-face 規則中定義的。

->使用：新的 @font-face 規則中，您必須首先定義字體的名稱（比如 myFirstFont），然後指向該字體文件。

@font-face{ #粗體字體 font-family: myFirstFont; src: url(Sansation_Bold.ttf), url(Sansation_Bold.eot); /* IE9+ */ font-weight:bold;}

->CSS3字體描述符：

> font-family：name，必需。規定字體的名稱。 > src：url,必需。定義字體文件的 URL。

>font-stretch：normal,可選。定義如何拉伸字體。默認是 "normal"。

>font-style：ormal,可選。定義字體的樣式。默認是 "normal"。 >font-weight：bold,可選。定義字體的粗細。默認是 "normal"。 >unicode-range：可選。定義字體支持的 UNICODE 字元範圍。默認是 "U+0-10FFFF"。6）2D/3D效果： —>轉換屬性： ->：transform：向元素應用 2D 或 3D 轉換。 ->：transform-origin：允許你改變被轉換元素的位置。 ->：transform-style：規定被嵌套元素如何在 3D 空間中顯示。 ->：perspective：規定 3D 元素的透視效果。

->：perspective-origin：規定 3D 元素的底部位置。

->：backface-visibility：定義元素在不面對屏幕時是否可見。 —>2D轉換方法： ->：translate()：元素從其當前位置移動，根據給定的 left（x 坐標）和 top（y 坐標） ->：rotate()：元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。 ->：scale()：元素的尺寸會增加或減少，根據給定的寬度（X 軸）和高度（Y 軸） ->：skew()：元素翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）

->：matrix()：把所有 2D 轉換方法組合在一起，需要六個參數，包含數學函數，允許您：旋轉、縮放、移動以及傾斜元素。

div{ #移動 transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ -o-transform: translate(50px,100px); /* Opera */ -moz-transform: translate(50px,100px); /* Firefox */}

div{ #旋轉 transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */}

div{ #縮放 transform: scale(2,4); -ms-transform: scale(2,4); /* IE 9 */ -webkit-transform: scale(2,4); /* Safari 和 Chrome */ -o-transform: scale(2,4); /* Opera */ -moz-transform: scale(2,4); /* Firefox */}

div{ # 翻轉 transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ -o-transform: skew(30deg,20deg); /* Opera */ -moz-transform: skew(30deg,20deg); /* Firefox */}

div{ #使用matrix方法將div旋轉30度 transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */}

—>3D轉換方法：Chrome 和 Safari 需要前綴 -webkit-。Opera不支持

case>: rotateX/Y/Z()： case>: rotate3d(x,y,z,angle):元素圍繞其 X/Y/Z 軸以給定的度數進行旋轉。 case>: translateX/Y/Z()： case>: translate3d(x,y,z)：元素以其 X/Y/Z 軸以給定的值移動。 case>: scaleX/Y/Z(): case>: scale3d(x,y,z)：元素以其 X/Y/Z 軸以給定的值縮放。 case>: matrix3d(n…n)：定義 3D 轉換，使用 16 個值的 4x4 矩陣。 case>: perspective(n)：定義 3D 轉換元素的透視視圖7）過渡：是元素從一種樣式逐漸改變為另一種的效果。

* 必須規定兩項內容：

規定您希望把效果添加到哪個 CSS 屬性上規定效果的時長—>屬性： ->：transition：簡寫屬性，用於在一個屬性中設置四個過渡屬性。 ->：transition-property：規定應用過渡的 CSS 屬性的名稱。 ->：transition-duration：定義過渡效果花費的時間。默認是 0。 ->：transition-timing-function：規定過渡效果的時間曲線。默認是 "ease"。 ->：transition-delay：規定過渡效果何時開始。默認是 0。

div{ transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; /* Firefox 4 */ -moz-transition-property:width; -moz-transition-duration:1s; -moz-transition-timing-function:linear; -moz-transition-delay:2s; /* Safari 和 Chrome */ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; /* Opera */ -o-transition-property:width; -o-transition-duration:1s; -o-transition-timing-function:linear; -o-transition-delay:2s;} /* 使用簡寫方式 */ div{ transition: width 1s linear 2s; /* Firefox 4 */ -moz-transition:width 1s linear 2s; /* Safari and Chrome */ -webkit-transition:width 1s linear 2s; /* Opera */ -o-transition:width 1s linear 2s;}

8）動畫：@keyframes 規則用於創建動畫。在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。IE9之前的版本不支持

@keyframes myfirst{ from {background: red;} to {background: yellow;}} @-moz-keyframes / @-webkit-keyframes / @-o-keyframes myfirst /* Firefox */{ from {background: red;} to {background: yellow;}}

from表示0%，動畫的開始，to表示100%動畫的結束，也可支持使用%:

@keyframes myfirst{ 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;}}

—>綁定到選擇器：規定動畫的名稱、時長

div{ animation: myfirst 5s; -moz-animation: myfirst 5s; /* Firefox */ -webkit-animation: myfirst 5s; /* Safari 和 Chrome */ -o-animation: myfirst 5s; /* Opera */}

—>animation屬性：

->：@keyframes：規定動畫。 ->：animation：所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性 ->：animation-name：規定 @keyframes 動畫的名稱。

->：animation-duration：規定動畫完成一個週期所花費的秒或毫秒。默認是 0。

->：animation-timing-function：規定動畫的速度曲線。默認是 "ease"。 ->：animation-delay：規定動畫何時開始。默認是 0。 ->：animation-iteration-count：規定動畫被播放的次數。默認是 1。 ->：animation-direction：規定動畫是否在下一週期逆向地播放。默認是 "normal"。 ->：animation-play-state：規定動畫是否正在運行或暫停。默認是 "running"。 ->：animation-fill-mode：規定對象動畫時間之外的狀態。9）多列布局—>屬性：-moz- -webkit- -o- ->：column-count：規定元素應該被分隔的列數。->：column-fill：規定如何填充列。->：column-gap：規定列之間的間隔。->：column-rule：設置所有 column-rule-* 屬性的簡寫屬性。->：column-rule-color：規定列之間規則的顏色。->：column-rule-style：規定列之間規則的樣式。->：column-rule-width：規定列之間規則的寬度。->：column-span：規定元素應該橫跨的列數。->：column-width：規定列的寬度。->：columns：規定設置 column-width 和 column-count 的簡寫屬性。10）用戶界面：包括元素尺寸、盒尺寸及輪廓等—>屬性：-moz- -webkit- -o-->：appearance：允許將元素設置為標準用戶界面元素的外觀->：box-sizing：允許以確切的方式定義適應某個區域的具體內容。->：icon：為創作者提供使用圖標化等價物來設置元素樣式的能力。->：nav-down：規定在使用 arrow-down 導航鍵時向何處導航。->：nav-up：規定在使用 arrow-up 導航鍵時向何處導航。->：nav-index：設置元素的 tab 鍵控制次序。->：nav-left：規定在使用 arrow-left 導航鍵時向何處導航。->：nav-right：規定在使用 arrow-right 導航鍵時向何處導航。->：outline-offset：對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓。輪廓不佔用空間；輪廓可能是非矩形->：resize：規定是否可由用戶對元素的尺寸進行調整。

div{ #規定 div 元素可由用戶調整大小 resize:both; overflow:auto;} div{ # 兩個並排的帶邊框方框 box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ width:50%; float:left;} div{#規定邊框邊緣之外 15 像素處的輪廓 border:2px solid black; outline:2px solid red; outline-offset:15px; }

博客地址：Web基礎之CSS3
推薦閱讀：

熱門新聞

週熱門

Web基礎之CSS3

python web真的沒機會了嗎？

請問一下計算機網路專業想轉行前端工作是自學還是培訓？

現實中，web開發，自己寫框架的單位or團隊多嗎？

剛入門前端，現在有點迷茫怎麼選擇。？

web應用中，提交的表單數據前端驗證和後端驗證同時存在是否是一種常識？

如何在短時間內提高前端開發能力？

關於android跟資料庫的一些問題和我的理解?

選擇前端還是後端?

想自學web前端開發，有好方法推薦嗎？

web前端初學者，剛學完jq，想問一下知乎大佬前輩同行，接下來學vue和node先學哪個好？

前端與後端數據交互格式有爭議，到底是誰的問題？

前端跨域怎麼解決？

Web前端工程師培訓哪家好？

web前端學習大概要多久？

請問問卷星樣本服務可靠嘛！?

熱門新聞

週熱門