CSS3 新特性

時間 2019-12-31

標籤 css3 css 特性欄目 CSS 简体版

原文原文鏈接

CSS3新特性樣式

背景

background-origin

咱們知道盒子的大小有三部分組成：border, padding, content，當咱們設置背景圖片時，圖片是會以左上角對齊，可是是以border的左上角對齊仍是以padding的左上角或者content的左上角對齊? border-origin正是用來設置這個的，它有三個可選值css

border-box

padding-box

content-box

其中意思沒必要解釋就能夠明白。若是不進行設置的話，默認是padding-box，即以padding的左上角爲原點。html

background-clip

該屬性是用來設置背景(背景圖片、背景顏色)延伸的範圍，有4個值可選css3

border-box：背景延伸至邊框外沿(可是在邊框下層)

padding-box：背景延伸至內邊距(padding)外沿,不會繪製到邊框處

content-box：背景被裁剪至內容區(content box)外沿

text：背景被裁剪成文字的前景色

具體能夠參考網站background-clip，這裏演示一下上面的效果瀏覽器

background-size

background-size用以設置背景圖片大小。單張圖片的背景大小可使用如下三種方法中的一種來規定：網絡

使用關鍵詞 contain

使用關鍵詞 cover

設定寬度和高度值

設定指定的寬度和高度值想必不用多加介紹。contain和cover會等比例的縮放圖片，以使得圖片可以最大的被完整包含或者最小的覆蓋背景區。ide

若是背景區(由background-origin決定)的寬高比和圖片的寬高比是同樣的，那麼cover和contain的結果是同樣的，會徹底的覆蓋背景區並完整的顯示。函數

邊框

邊框圓角

使用border-radius能夠設置邊框爲圓角的，border-radius的值就是圓角邊框的半徑。工具

width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 20px;
background-color: pink;
複製代碼

與padding同樣，取不一樣個數的值，表明設置不一樣地方的圓角半徑，如佈局

取值個數	設置
1個，如border-radius: 20px	設置四個角的圓角半徑都爲20px
2個，如border-radius: 10px 20px	設置左上角和右下角這條對角線爲10px,另外一條對角線爲20px
3個，如border-radius: 10px 20px 30px	設置左上角爲10px,右上角和左下角這條對角線爲20px,右下角爲30px
4個，如border-radius: 5px 10px 15px 20px	從左上角開始設置，按順時針來，即左上角爲5px,右上角爲10px, ...

由第一張圖，咱們發現半徑也分爲水平半徑和垂直半徑，這兩個也能夠分別設置，用/分開當作兩組，第一個用來設置水平半徑，第二個設置垂直半徑，如post

width: 100px;
height: 120px;
margin: 0 auto;
border-radius: 50px / 60px; 
background-color: pink;
複製代碼

咱們設置四個角的水平半徑爲50px,四個角的水平半徑爲60px,獲得效果以下

若是不分開設置，則默認水平半徑和垂直半徑是相同的。

若是想要更加詳細的瞭解，這裏推薦一篇阮一峯的網絡日誌CSS3圓角邊框。

邊框圖片

找到一篇寫的很好的博文border-image的正確用法，因此這裏就不本身寫了。

陰影

盒子陰影

爲了知道什麼是盒子陰影，觀看以下效果

這裏選取了小米的作法，因爲設置陰影的顏色比較淡，因此可能比較難看出來。

用以設置盒子陰影的屬性是box-shadow,它的值比較多，須要設置的值以下，

水平陰影

垂直陰影

模糊距離(虛實)

陰影尺寸(影子大小)

陰影顏色

內/外陰影(這個我也不懂，不作介紹)

其中水平陰影h-shadow和垂直陰影v-shadow是必須設置的。

爲了觀看設置這些值的效果，咱們首先建立一個盒子

width: 200px;
height: 200px;
border: 1px solid #CCC;
margin: 100px auto;
複製代碼

爲盒子添加陰影

box-shadow: 1px 1px 1px 1px red;
複製代碼

水平陰影大小的影響(正值，陰影向右移動，負值，陰影向左移動)

垂直陰影大小的影響(正值，陰影向下移動，負值，陰影向上移動)

模糊距離大小的影響

陰影尺寸大小的影響

文本陰影

使用text-shadow來設置文本陰影。使用與box-shadow差很少，具體能夠參照text-shadow。

CSS3選擇器

CSS3新增了許多的選擇器，爲咱們選擇元素提供了更加靈活的選擇。

屬性選擇器

[attr]：選擇包含attr屬性的標籤

[attr=value]：選擇attr屬性值爲value的標籤

[attr^=value]：選擇attr屬性值以value開頭的標籤

[attr*=value]：選擇attr屬性值包含value的標籤

[attr$=value]：選擇attr屬性值以value的標籤

如

div[class] {
    /* 會選擇包含class屬性的div標籤 */
}
div[class="active"] {
    /* 會選擇class屬性值爲active的div標籤 */
}
div[class^="header"] {
    /* 會選擇class屬性以header開頭的div標籤 */
}

... ...
複製代碼

結構僞類選擇器

E:first-child

E:last-child

E:nth-child(n)

E:nth-last-child(n)

E:first-of-type

E:last-of-type

E:nth-of-type(n)

E:nth-last-of-type(n)

上面的選擇器是比較常見的結構僞類選擇器，下面具體講解其表達的意思。

E:first-child指的是，選擇E，這個E知足的條件是：它是其父元素第一個子元素。聽起來有點繞，來看一個例子

<div>
    <span></span>
    <h1></h1>
    <p></p>
</div>
<div>
    <i></i>
    <span></span>
    <h1></h1>
    <p></p>
</div>
複製代碼

span:first-child {
    /* 它會選擇span，條件是這個span必須是它父元素的第一個子元素 */
}
複製代碼

因爲第一個div裏面的span是其父元素(第一個div)的第一個子元素，因此第一個div裏面的span會被選中。而第二個div裏面的span不是其父元素(第二個div)的第一個子元素，因此這個span不會被選中。

E:last-child的與E:first-child類似，不過第一個改成最後一個。

E:nth-child(n)指的是選擇E，E須要知足條件，是其父元素的第n個元素(n是從1開始的)，E:first-child就至關因而E:nth-child(1)。E:nth-child(n)中這個"n"除了能夠是具體的數字之外，還能夠是odd和even，表示選擇全部的E，這些E是其父元素的第奇數或第偶數個。除此以外"n"還能夠是表達式，如2n+1, 3n(n從1開始)。

而E:nth-last-child(n)則是倒着數的，用法同E:nth-child(n)類似，這裏很少介紹。

E:first-of-type與E:first-child不一樣，其意思是選擇器父元素下的第一個E元素。仍是以上面兩個div爲例

<div>
    <span></span>
    <h1></h1>
    <p></p>
</div>
<div>
    <i></i>
    <span></span>
    <h1></h1>
    <p></p>
</div>
複製代碼

span:first-of-type {
    /* 選擇span父元素下的第一個span元素 */
}
複製代碼

這個時候兩個span均可以被選擇到，first-of-type至關於只是將E的父元素所包含的E所有抽離出來，而後進行選擇。如今咱們將div包含的span所有抽離出來，至關於

<div>
    <span></span>
</div>
<div>
    <span></span>
</div>
複製代碼

而後選擇第一個span，因此這兩個span均可以被選擇到。其他的first-last-type, nth-of-type(n), nth-last-of-type同上面介紹的last-child, ...類似，其不一樣之處在fitst-child與first-of-type處已詳細闡述。

CSS3顏色漸變

顏色漸變是指在兩個顏色之間平穩的過渡。以往咱們若是但願有顏色漸變的效果，會在繪圖工具(如PS)設計出但願的效果，而後做爲圖片來實現這種效果。如今經過瀏覽器能夠渲染而成，這樣能夠減小下載的時間和帶寬的使用，以及在放大時看起來效果更好，由於這是瀏覽器自動生成的。

線性漸變

線性漸變指的是顏色在一條線上平穩的變化，爲了實現線性漸變，咱們要規定線的方向，起點顏色和終止顏色。它的語法爲

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
複製代碼

如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style> .box { width:100%; height:100px; background-image: linear-gradient(to right, red, green); } </style>

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

    </div>
</body>
</html>
複製代碼

效果爲

其中

linear-gradient(to right, red, green);
複製代碼

其中第一個參數to right是用來設置方向的，設置方向的值有

to right：從左往右

to left：從右往左

to top：從下往上

to bottom：從上往下，默認值

to right bottom：從左上角往右下角

... ...

除了能夠設置這些值以外，還能夠設置角度，如

linear-gradient(0deg, red, green);
複製代碼

其中角度所表明的的方向以下所示

即0deg表明的方向是從下往上。

除此以外，除了設置起點顏色和終點顏色以外，還能夠在之間設置多個顏色節點，以下面設置了一個彩虹漸變色

background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
複製代碼

除此以外，還能夠在顏色後面加上數值或者百分比，如

background-image: linear-gradient(to right, red, blue 10%, violet);
複製代碼

blue 10%表示blue顏色節點在該線性方向10%的位置，因此從0%-10%是紅色到藍色的漸變，10%-100%是藍色到紫色的漸變。

接下來介紹漸變的最後一個特性：漸變重複。看下面一個例子

/* 設置爲23%而沒有設置爲能被100%整除的數 就是想看一下這種狀況是怎麼處理的 */
repeating-linear-gradient(to right, red,yellow 23%);
複製代碼

上面的意思是從0%-23%實現紅色到黃色的漸變，而後重複直至100%。

徑向漸變

徑向漸變是指以某點爲圓心，向外進行顏色漸變。因此爲了實現徑向漸變，咱們要規定圓心的位置和起點顏色和終點顏色。徑向漸變的語法爲

background-image: radial-gradient(shape size at position, start-color, ..., last-color);
複製代碼

其中shape爲漸變的形狀，有兩種取值

circle(圓形)

ellipse(橢圓, 默認值)

size是指100%所表明的的長度，有四種取值

closest-side(離最近的邊的距離)

farthest-side(離最遠的邊的距離)

cloest-corner(離最近的角的距離)

farthest-corber(離最遠的角的距離，默認值)

position是指圓心的位置，默認爲center，即中心位置，也能夠經過at 100px 100px形式進行設置，左上角的座標的爲(0px, 0px)。

.box {
    width:400px;
    height:200px;
    /* 設置size大小爲離最近的邊的距離 */
    background-image: repeating-radial-gradient(circle closest-side at 200px 100px, red, red 10%,green 12.5%, green 25%)
}
複製代碼

可見離最近的邊有4個完整的重複。

/* 設置size大小爲離最遠的邊的距離 */
background-image: repeating-radial-gradient(circle farthest-side at 200px 100px, red, red 10%,green 12.5%, green 25%)
複製代碼

可見離最遠的邊有4個完整的重複。

/*爲了使最遠的角和最近的角的距離不一樣 position不能設置在中心 */
/* 設置size大小爲離最近的角的距離 */
background-image: repeating-radial-gradient(circle closest-corner at 100px 100px, red, red 10%,green 12.5%, green 25%)
複製代碼

可見離最近的角有4個完整的重複。

/* 設置size大小爲離最遠的角的距離 */
background-image: repeating-radial-gradient(circle farthest-corner at 100px 100px, red, red 10%,green 12.5%, green 25%)
複製代碼

可見離最遠的角有4個完整的重複。

CSS3 2D變換

CSS3 2D變換包括對元素進行移動、縮放、轉動、拉長或拉伸。

translate()：對元素進行進行移動
- translate(100px)：對元素向x正方向移動100px(負值向負方向移動)

scale()：對元素進行縮放

scale(n)：對元素進行縮放，傳入的參數大於1，進行放大，小於1，進行縮小

scale(x, y)：第一個參數對寬度進行縮放，第二個值對高度進行縮放

rotate()：圍繞中心旋轉，正值順時針，負值逆時針

transform-origin：能夠改變旋轉的中心，如

/* 圍繞左上角進行旋轉 */
transform-origin: left top;
複製代碼

/* 圍繞中心旋轉 爲默認值 */
transform-origin: 50% 50%;
複製代碼

skew()：對元素進行傾斜

skew(angle)：向x軸負方向傾斜angle(負值沿正方向)

skew(anglex, angley)：第一個參數對x方向，第二個參數對y方向

除了可使用上述屬性進行設置，還可使用translateX(), translateY()等進行設置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style> div { width: 100px; height: 100px; } /* 爲每一個div設置顏色 */ .box1 { background-color: red; } .box2 { background-color: aqua; } .box3 { background-color: chocolate; } .box4 { background-color: darkcyan; } /* 爲每一個盒子設置不一樣的2D變換效果 */ .box1:hover { transform: translateX(100px); } .box2:hover { transform: scale(0.5); } .box3:hover { transform: rotate(-30deg); } .box4:hover { transform: skew(30deg); } </style>

</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>  
</body>
</html>
複製代碼

CSS3 3D

3D變換的操做同2D相同，只是多了一個對Z軸的操做，如translateZ()，而rotate也分爲rotateX(), rotateY(), rotateZ()，分別表示繞着X軸，Y軸，Z軸旋轉。2D變換的rotate()其實就至關於rotateZ()。

CSS3動畫

transition

首先咱們來看一個例子

.box {
    height: 100px;
    width: 100px;
    background-color: black;
}
.box:hover {
    transform: translateX(600px);
}
複製代碼

當咱們把鼠標放在盒子上時，盒子向右移動了600px，可是這個過程是在瞬間完成的，十分的突兀，咱們但願是緩慢由一個轉態轉變到另外一個狀態的，這種效果又叫作過渡，這時就須要用到transition屬性了。

爲某個元素添加過渡效果，必須規定兩項內容：

transition-property：指定要添加效果的CSS屬性

例如上面就要爲transform添加過渡效果，因此就能夠寫爲

/* 值能夠爲all 表示爲全部的屬性添加過渡效果 默認值爲all*/
transition-property: transform;
複製代碼

transition-duration：添加過渡的總時間

/* 默認值爲0s */
transition-duration: 1s; /* 單位能夠爲s */
transition-duration: 100ms; /* 單位也能夠爲ms */
複製代碼

除了上面必須設置的兩個屬性，還能夠設置下面的屬性

transition-timing-function：
時間函數，設置過渡的變化速度
- ease：開始和結束慢，中間快，默認值。

除了能夠設置以上關鍵字，還能夠設置steps()函數，語法以下：

steps(<integer>[,start | end]?)
複製代碼

第一個參數傳入一個整數值，steps步進函數將過渡時間劃分紅大小相等的時間時隔來運行，這個整數值就是分紅的份數。第二個值是可選的，默認值爲end。若是是start，則不保留開始值，若是是end，則保留開始值。

這裏給出一個利用steps()函數作動畫效果的例子。

transition-delay：延時時間，默認值爲0s

animation

與transition同樣，animation也有不少的屬性

animation-name：動畫名稱

animation-duration：動畫持續時間

animation-timing-function：動畫時間函數

animation-delay：動畫延遲時間

animation-iteration-count：動畫執行次數，能夠設置爲一個整數，也能夠設置爲infinite，意思是無限循環

animation-direction：動畫執行方向

animation-paly-state：動畫播放狀態

animation-fill-mode：動畫填充模式

過渡是指在兩個狀態之間，而動畫則是指在多個狀態之間變化，這些狀態咱們稱之爲關鍵幀，所以動畫又稱之爲關鍵幀動畫。使用動畫首先要建立關鍵幀，而後使用animation-name去調用該動畫，如

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 
     <style> .box { width: 100px; height: 100px; background-color: aqua; } .box:hover { animation-name: move; animation-duration: 1s; } /* 建立一個關鍵幀動畫 動畫名爲move */ /* 調用時使用animation-name: move調用 */ @keyframes move { /* 第一個狀態 0% 時的狀態 可使用from代替 */ /* 這裏的百分比是指 總時間 * 百分比 獲得的某個時刻的狀態*/ 0% { transform: translateX(0px); } 50% { transform: translateX(100px); } /* 100% 可使用 to 代替 */ 100% { transform: translateY(100px); } } </style>
 
 </head>
 <body>
    <div class="box">
         
    </div>
 </body>
 </html>
複製代碼

咱們還能夠設置動畫的執行次數，修改上面的樣式爲

.box {
    width: 100px;
    height: 100px;
    background-color: aqua;
    animation-name: move;
    animation-duration: 1s;
    /* 播放次數默認值爲 1 */
    animation-iteration-count: infinite;
}
複製代碼

咱們發現動畫執行完畢後，盒子忽然就回到了原位置，這個過程有點突兀，咱們但願這個過程也是慢慢過渡的，那麼咱們能夠設置animation-direction，animation-direction有四種取值

normal：默認值，正常播放

reverse：反向播放

alternate：若是動畫次數在兩次或兩次以上，那麼第偶數次爲反向播放，就能夠達到回到原位置時也有過渡的效果。若動畫只播放一次，則和正向播放同樣。

alternate-reverse：若動畫只播放一次，則和反向播放同樣。若播放兩次以上，偶數次效果爲正向播放

.box:hover {
   animation-name: move;
   animation-duration: 1s;
   animation-iteration-count: 2;
   animation-direction: alternate;
}
複製代碼

animation-play-state用來設置動畫的播放狀態，有兩種取值

running：默認值，動畫運行

paused：動畫暫停

將樣式修改成

.box {
    width: 100px;
    height: 100px;
    background-color: aqua;
    animation-name: move;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
         
.box:hover {
    /* 當鼠標放上去時 動畫暫停 */
   animation-play-state: paused;
}
複製代碼

animation-fill-mode用來定義動畫開始幀以前和結束幀以後的動做，有如下四種取值

none：默認值。動畫結束後，元素移動到初始狀態(不必定0%的狀態，是元素自身的屬性值)

forwards：元素停在動畫結束時的位置(不必定是100%的位置，有可能反向運動)

backwards：在animation-delay的時間內，元素馬上移動到動畫開始時(不必定是0%，有可能反向運動)的位置。若元素無animation-delay時，與none的效果相同

both：同時具備forwards和backwards

修改樣式以下

.box {
   width: 100px;
   height: 100px;
   background-color: aqua;
}
         
.box:hover {
   animation-name: move;
   animation-duration: 1s;
   /* 動畫結束後，停留在動畫結束的位置 */
   animation-fill-mode: forwards;
}
複製代碼

CSS3 flex佈局

當一個父元素被設置爲display:flex時，它就是彈性佈局，子元素的float、clear和vertical-align屬性將失效。此時咱們把父元素稱之爲container(容器)，把子元素稱之爲item(項目)。當父元素被設置爲彈性佈局後，對子元素有什麼影響? 先來感覺一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style> .container { display: flex; width: 500px; height: 400px; background-color: crimson; } .item { width: 100px; height: 100px; background-color: aqua; position: relative; } /* 這個是爲了演示方便 樣式不重要 沒必要細看 */ .item div{ width: 50%; height: 50%; position: absolute; /* 下面三行語句是爲了設置居中對齊 */ top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: brown; /* 圓角邊框 */ border-radius: 50%; /* 下面兩行設置文字居中對齊 */ text-align: center; line-height: 50px; /* 設置字體樣式 */ font-size: 30px; font-weight: 700; color: white; } </style>

</head>
<body>
   <div class="container">
        <div class="item"><div>1</div></div>
        <div class="item"><div>2</div></div>
        <div class="item"><div>3</div></div>
   </div>
</body>
</html>
複製代碼

當父元素設置爲flex佈局後，其子元素item會在父元素container的主軸上排列。

這裏又牽涉到新的概念，主軸(main axis)，flex容器的主軸默認爲X軸，即從左向右，既然有主軸，那麼就會有側軸(cross axis)，默認的側軸爲Y軸，即從上往下。

container上的屬性

直觀的感覺了一下flex的效果，如今咱們來看看flex要設置哪些屬性，首先設置在container的flex屬性有

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

下面來一一介紹。

flex-direction是用來設置主軸的，它有如下四個值可選

row：默認值，主軸爲水平方向，起點在左端。

row-reverse：主軸爲水平方向，起點在右端。

column：主軸爲垂直方向，起點在上沿。

column-reverse：主軸爲垂直方向，起點在下沿。

如今咱們分別修改container裏面的樣式

flex-direction: row-reverse;
複製代碼

flex-direction: column;
複製代碼

flex-direction: column-reverse;
複製代碼

爲了演示flex-wrap，咱們添加9個item(此時flex-direction爲默認值row，除非特別聲明，不然咱們在演示其一個flex屬性時，會將其餘flex屬性設置爲默認值)

<div class="container">
     <div class="item"><div>1</div></div>
     <div class="item"><div>2</div></div>
     <div class="item"><div>3</div></div>
     <div class="item"><div>4</div></div>
     <div class="item"><div>5</div></div>
     <div class="item"><div>6</div></div>
     <div class="item"><div>7</div></div>
     <div class="item"><div>8</div></div>
     <div class="item"><div>9</div></div>
</div>
複製代碼

效果爲

咱們發現9個item排成了一排，沒有換行。爲了使得item可以換行，咱們須要設置flex-wrap，它有三個值可選

nowrap：默認值，不換行

wrap：換行，第一行在上方

wrap-reverse：換行，第一行在下方

flex-wrap: wrap;
複製代碼

flex-wrap: wrap-reverse;
複製代碼

flex-flow是flex-direction和flex-wrap兩個屬性的簡寫，默認值爲row wrap

flex-flow: <flex-direction> || <flex-wrap>;
複製代碼

justify-content是用來設置item在container在主軸上的對齊方式的，具體對齊方式與軸的方向有關,下面假設主軸爲從左到右(row)。有下面幾種值可選

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。