【CSS3】

邊框

border-radius圓角邊框

四個值: 第一個值爲左上角，第二個值爲右上角，第三個值爲右下角，第四個值爲左下角。

三個值: 第一個值爲左上角, 第二個值爲右上角和左下角，第三個值爲右下角

兩個值: 第一個值爲左上角與右下角，第二個值爲右上角與左下角

一個值： 四個圓角值相同

box-shadow盒陰影

box-shadow: offset-x offset-y blur spread color inset

box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展] [陰影顏色] [投影方式]

offset-x：必需，取值正負均可。offset-x水平陰影的位置。

offset-y：必需，取值正負均可。offset-y垂直陰影的位置。

blur:可選，只能取正值。blur-radius陰影模糊半徑，0即無模糊效果，值越大陰影邊緣越模糊。

spread：可選，取值正負均可。spread表明陰影的周長向四周擴展的尺寸，正值，陰影擴大，負值陰影縮小。

inset:可選。關鍵字，將外部投影(默認outset)改成內部投影。inset 陰影在背景之上，內容之下。能夠寫在參數的第一個或最後一個，其餘位置無效。

border-image邊界圖片

border-image: url(border.png) 30 round

border-image: source slice width outset repeat

border-image-sourc：用於指定要用於繪製邊框的圖像的位置

border-image-slice：圖像邊界向內偏移

border-image-width：圖像邊界的寬度

border-image-outset：用於指定在邊框外部繪製 border-image-area 的量

border-image-repeat：用於設置圖像邊界是否應重複（repeat）、拉伸（stretch）或鋪滿（round）。

 背景

background-image背景圖片

不一樣的背景圖像和圖像用逗號隔開，全部的圖片中顯示在最頂端的爲第一張。

background-image: url(flwr.gif), url(paper.gif);

background-position: right bottom, left top;

background-repeat: no-repeat, repeat;

background-size背景圖片的大小

能夠指定像素或百分比大小。指定的大小是相對於父元素的寬度和高度的百分比的大小。

background-origin背景圖像的位置區域

content-box, padding-box,和 border-box區域內能夠放置背景圖像。

background-clip背景剪裁

content-box, padding-box,和 border-box

 漸變

linear-gradien水平漸變

background-image: linear-gradient(to right，#e66465, #9198e5)

to bottom、to top、to right、to left、to bottom right

background-image: linear-gradient(angle, color-stop1, color-stop2)

 

使用透明度

background-image: repeating-linear-gradient(red, yellow 10%, green 20%)

徑向漸變radial-gradient

background-image: radial-gradient(shape size at position, start-color, ..., last-color)

shape：circle 表示圓形，ellipse 表示橢圓形

background-image: radial-gradient(circle, red, yellow, green)

size ：漸變的大小。closest-side、farthest-side、closest-corner、farthest-corner

background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black)

background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black)

repeating-radial-gradient() 函數用於重複徑向漸變

background-image: repeating-radial-gradient(red, yellow 10%, green 15%)

文本效果

text-shadow文本陰影

text-shadow: 5px 5px 5px #FF0000;

text-overflow溢出屬性

ellipsis、clip

white-space:nowrap 

overflow:hidden;

white-space:nowrap文本不會換行會在同一行上繼續，直到遇到<br>

word-wrap（overflow-wrap）對長的不可分割的單詞進行分割並換行到下一行（容許斷句）

normal只在容許的斷字點換行

break-word在長單詞或 URL 地址內部進行換行

word-break非中日韓文本的單詞換行（怎麼樣斷句）

normal默認行爲

keep-all只能在半角空格或連字符處換行

break-all容許在單詞內換行

字體

@font-face 規則

@font-face { font-family: myFirstFont; src: url(sansation_light.woff); }

div { font-family:myFirstFont; }

2D轉換

translate() 平移

根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動

transform: translate(50px,50px)

rotate() 旋轉

在一個給定度數順時針旋轉的元素。負值是容許的，這樣是元素逆時針旋轉。

transform: rotate(30deg)

scale()縮放

該元素增長或減小的大小，取決於寬度（X軸）和高度（Y軸）的參數

transform: scale(2,3) 

skew() 傾斜

表示X軸和Y軸傾斜的角度，若是第二個參數爲空，則默認爲0，參數爲負表示向相反方向傾斜。

transform: skew(30deg,20deg)

matrix() 

matrix 方法有六個參數，包含旋轉，縮放，移動（平移）和傾斜功能。

3D轉換

rotateX() 

圍繞其在一個給定度數X軸旋轉的元素

transform: rotateX(120deg)

rotateY() 

圍繞其在一個給定度數Y軸旋轉的元素

transform: rotateY(130deg)

過渡

從一種樣式逐漸改變爲另外一種的效果

div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s, transform 2s;
}

div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}

transition-property 應用過渡的 CSS 屬性的名稱

transition-duration 過渡效果花費的時間

transition-timing-function 過渡效果的時間曲線

transition-delay 過渡什麼時候開始

transition: width 1s linear 2s

動畫

@keyframes

@keyframes myfirst {

  from {background: red;}

  to {background: yellow;}

}

鍵詞 "from" 和 "to"，等同於 0% 和 100%

animation: myfirst 5s;

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