小結css2與css3的區別

時間 2019-12-02

標籤小結 css2 css css3 區別欄目 CSS 简体版

原文原文鏈接

CSS3引進了一些新的元素新的特性，我收集如下，本身作了一個小結：javascript

animation（基礎動畫）eg: div { animation: myfirst 5s linear 2s infinite alternate; /* Firefox: */ -moz-animation: myfirst 5s linear 2s infinite alternate; /* Safari 和 Chrome: */ -webkit-animation: myfirst 5s linear 2s infinite alternate; /* Opera: */ -o-animation: myfirst 5s linear 2s infinite alternate; }
background-clip（規定背景的繪製區域）eg: div { background-color:yellow; background-clip:content-box; }
background-origin（
background-clip 與 background-origin是css3中引入的兩個跟元素背景相關的屬性，它們有相同的可選值，即border、padding、content三種，並且這兩個屬性表示的都是元素背景與元素邊框、補白(padding)和內容區域之間的某種關係。css

好比，咱們想要在邊框上顯示背景，咱們可使用background-origin幫咱們實現（前提是邊框要是透明的，否則它會覆蓋住背景）html

background-clip：border|padding|contentjava

該屬性指定了背景在哪些區域能夠顯示，但與背景開始繪製的位置無關，背景的繪製的位置能夠出如今不顯示背景的區域，這時就至關於背景圖片被不顯示背景的區域裁剪了一部分同樣。css3

background-origin：padding|border|contentweb

該屬性指定了背景從哪一個區域(邊框、補白或內容)開始繪製,但也僅僅能控制背景開始繪製的位置，你能夠用這個屬性在邊框上繪製背景，但邊框上的背景顯不顯示出來那就要由background-clip來決定了瀏覽器
）
background-size（背景大小）
border-radius (圓角)eg:
向 div 元素添加圓角邊框：安全
```
div
{
border:2px solid;
border-radius:25px;
}
```
border-image (邊框圖片)
box-decoration-break（{ box-decoration-break: sBreak } 可能的值 sBreak 一個字符串,用於指定如下值之一 slice 默認值。不會針對整個方框呈現 border 、 padding 、 box-...）
box-shadow（陰影）

box-sizing（

規定兩個並排的帶邊框的框：佈局

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */ width:50%; float:left; }）

columns (

規定列的寬度和列數：學習

div
{
columns:100px 3;
-moz-columns:100px 3; /* Firefox */
-webkit-columns:100px 3; /* Safari 和 Chrome */ }

)

clear-after（清除浮動）

flex (

定義兩個可伸縮的 p 元素。若是父元素的總寬度是 300 像素，則 #p1 的寬度是 100 像素，而 #p2 的寬度是 200 像素：

#p1
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari 和 Chrome */ box-flex:1.0; border:1px solid red; } #p2 { -moz-box-flex:2.0; /* Firefox */ -webkit-box-flex:2.0; /* Safari 和 Chrome */ box-flex:2.0; border:1px solid blue; }

)

font-stretch（
讓全部的div元素的文本更寬：

div { font-stretch: expanded; }
）
font-size-adjust（
經過指定font-size-adjust屬性，瀏覽器將調整字體大小，不管字體系列（"宋體"性質值0.58）：

div { font-size-adjust: 0.58; }
）
font-synthesis（
@font-face是CSS3中的一個模塊，他主要是把本身定義的Web字體嵌入到你的網頁中，隨着@font-face模塊的出現，咱們在Web的開發中使用字體不怕只能使用Web安全字體，大家當中或許有許多人會不天然的問，這樣的東西IE能支持嗎？當我告訴你們@font-face這個功能早在IE4就支持了你確定會感到驚訝。個人Blog就使用了許多這樣的自定義Web字體，好比說首頁的Logo，Tags以及頁面中的手寫英文體，不少朋友問我如何使用，能讓本身的頁面也支持這樣的自定義字體，一句話這些都是@font-face實現的，爲了能讓更多的朋友知道如何使用他，今天我主要把本身的一點學習過程貼上來和你們分享。

首先咱們一塊兒來看看@font-face的語法規則：

@font-face { font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>]; }
）
font-kerning（適用於在字體中以代碼形式進行字符對間距調整p { font-kerning: none; }）
font-variant-caps（設置小型大寫字母的字體顯示文本,）
hanging-punctuation（目前主流瀏覽器都不支持 hanging-punctuation 屬性。
在 p 元素首行的開始邊緣以外放置一個標點符號：
```
p
{

}
hanging-punctuation:first;
```
）
hyphens（設置如何對單詞進行拆分,以改善段落的佈局）
icon（css3實現Icon UI圖標）
image-resolution（規定圖像的正確分辨率）
image-orientation（目前只有 Firefox26 支持這個讓圖片旋轉的 css 屬性）
line-break（
在恰當的斷字點進行換行：
```
p.test {word-break:hyphenate;}
```
）
object-fit（
object-position屬性決定了它的盒子裏面替換元素的對齊方式。其取值和CSS中background-position屬性取值同樣。以下所示：
```
img { height: 100px; width: 100px; object-fit: contain; object-position: top 75%; }
```
）
object-position（
object-position屬性決定了它的盒子裏面替換元素的對齊方式。其取值和CSS中background-position屬性取值同樣。以下所示：
```
img { height: 100px; width: 100px; object-fit: contain; object-position: top 75%; }
```
）
opacity（透明度）

outline-offset（

規定邊框邊緣以外 15 像素處的輪廓：

div
{
border:2px solid black;
outline:2px solid red;

}
outline-offset:15px;

）

overflow-wrap / word-wrap（
容許長單詞換行到下一行：
```
p.test {word-wrap:break-word;}
```
）

backface-visibility（

隱藏被旋轉的 div 元素的背面：

div
{
backface-visibility:hidden;
-webkit-backface-visibility:hidden;	/* Chrome 和 Safari */
-moz-backface-visibility:hidden; 	/* Firefox */ -ms-backface-visibility:hidden; /* Internet Explorer */ }

）

perspective（

設置元素被查看位置的視圖：

div
{
perspective: 500;
-webkit-perspective: 500; /* Safari 和 Chrome */
}

）

perspective-origin（

設置 3D 元素的基點位置：

div
{
perspective:150;
perspective-origin: 10% 10%;
-webkit-perspective:150;	/* Safari 和 Chrome */
-webkit-perspective-origin: 10% 10%;	/* Safari 和 Chrome */ }

）

pointer-events (
CSS新屬性pointer-events：字面理解是點擊鼠標事件，值分別是auto和none。

當使用pointer-events:none,表示它將捕獲不到任何點擊，而只是讓事件穿透到它的下面。代碼以下：
```
<style>
	.overlay {
		pointer-events: none;
	}
</style>
	
<div id="overlay" class="overlay"></div>
```
)
resize（重置）
tab-size（檢索或設置對象中的製表符的長度。）
text-align-last（設置或檢索對象中內容的水平對齊方式）
text-decoration-line（檢索或設置對象中的文本裝飾線條的位置。
text-decoration-skip（設置對象中的文本裝飾線條的形狀）
text-decoration-position（

text-decoration-color：<color>

<color>：

指定顏色。

檢索或設置對象中的文本裝飾線條的顏色
text-decoration-style（

text-decoration-style：solid | double | dotted | dashed | wavy

默認值：solid

取值：

solid：

實線

double：

雙線

dotted：

點狀線條

dashed：

虛線

wavy：

波浪線

說明：
檢索或設置對象中的文本裝飾線條的形狀。
- 對應的腳本特性爲textDecorationStyle。
）
text-emphasis (
目前主流瀏覽器都不支持 text-emphasis 屬性。

text-emphasis 屬性是簡寫屬性，用於在一個聲明中設置 text-emphasis-style 和 text-emphasis-color。

)

text-justify（

齊行改變單詞間的間隔：

div
{
text-align:justify;

}
text-justify:inter-word;

）

text-overflow（文本溢出隱藏）

transform（

旋轉 div 元素：

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); 	/* IE 9 */
-moz-transform:rotate(7deg); 	/* Firefox */ -webkit-transform:rotate(7deg); /* Safari 和 Chrome */ -o-transform:rotate(7deg); /* Opera */ }

）

transform-style（

使被轉換的子元素保留其 3D 轉換：

div
{
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg);	/* Safari 和 Chrome */
-webkit-transform-style: preserve-3d;	/* Safari 和 Chrome */ }

）

text-shadow（
基礎的文本陰影效果：
```
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
```
）

transition (

把鼠標指針放到 div 元素上，其寬度會從 100px 逐漸變爲 300px：

div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */ }

)