用CSS美化你的HTML

時間 2019-12-11

標籤 css 美化 html 欄目 CSS 简体版

原文原文鏈接

CSS的簡介：css

一、CSS的定義：層疊樣式表。屬性和屬性值用冒號分隔開，以分號結尾(這些符號都是英文的)。html

二、CSS得引入方式：python

行內引入：<div style="這裏寫樣式">我是一個塊級的標籤</div>
嵌入式：將CSS樣式表放到head中用<style>標籤包裹起來

<head> 
    ... 
    <style type="text/css"> 
        ...此處寫CSS樣式 
    </style> 
</head>

導入式：將一個獨立的.css文件引入HTML文件中，導入式使用@import 引入外部CSS文件，<style>標記也是寫在<head>標記中。導入式會在整個網頁裝載完後再裝載CSS文件。

<head> 
    ... 
    <style type="text/css"> 
        @import "My.css"; 此處注意.css文件的路徑 
    </style> 
</head>

連接式引入：將一個獨立的.css文件引入到HTML文件中，使用<link>標記寫在<head>標記中。連接式會以網頁文件主體裝載前裝載CSS文件。

<head> 
    ... 
    <link href="My.css" rel="stylesheet" type="text/css"> 
</head>

三、樣式的應用順序：api

行內樣式優先級最高
針對相同的樣式屬性，不一樣的樣式屬性將以合併的方式呈現
相一樣式而且相同屬性，呈現方式在<head>中的順序決定，後面會覆蓋前面屬性
!important 瀏覽器
指定樣式規則應用最優先

2、選擇器 ssh

基本選擇器：ide

一、通用元素選擇器：佈局

　　* 表示應用到全部的標籤。字體

*{margin：0；padding：0；}

二、標籤選擇器動畫

　　匹配全部使用 div 標籤的元素（能夠匹配全部標籤）

div {color: yellow}

三、類選擇器

　　匹配全部class屬性中包含info的元素。

　　語法：.類名{樣式}（類名不能以數字開頭，類名要區分大小寫。）

.yanse{color:yellow}

<div class="yanse"/>個人div</div>

四、id選擇器

　　使用id屬性來調用樣式，在一個網頁中id的值都是惟一的（是W3C規範而不是規則，因此不會報錯）。

　　語法：#ID名{樣式}（ID名不能以數字開頭

#Mycolor {color: yellow} 
<h3 id="Mycolor">H3</h3>

組合選擇器：

一、多元素組合選擇器

同時匹配兩個或多個標籤，用逗號隔開

p，a，div{color: yellow;} 
<p>段落</p>
<a>link</a>
<div>kuai</div>

二、後代元素選擇器

匹配全部div標籤裏嵌套的P標籤，之間用空格分隔。

div p {color: yellow;} 
 
<div> 
    <p>pppppp</p> 
    <div> 
        <p>pppppp</p> 
    </div> 
</div>

三、子代元素選擇器

　　匹配全部div標籤裏嵌套的子P標籤，之間用>分隔。

div > p {color: yellow;} 
 
<div> 
    <p>div</p> 
    <p>div</p> 
</div>

四、毗鄰元素選擇器

　　匹配全部緊隨div標籤以後的同級標籤P，之間用+分隔（只能匹配一個）。

div + p {color: yellow;} 
 
<div>div</div> 
<p>ppp</p>

屬性選擇器

1.[title] & P[title]

設置全部具備title屬性的標籤元素；

設置全部具備title屬性的P標籤元素。

[title] 
    { 
        color: yellow; 
    } 
    p[title] 
    { 
        color: yellow; 
    } 
 
<div title>hello</div> 
<p title>hello</p>

2.[title=mk]

設置全部title屬性等於「mk」的標籤元素。

[title="mk"] 
    { 
        color: yellow; 
    } 
 
<p title="mk">mk</p>

2.[title=mk]

　　設置全部title屬性具備多個空格分隔的值、其中一個值等於「mk」的標籤元素。

[title~="mk"] 
    { 
        color: yellow; 
    } 
 
<p title="mk Jenny">Mk</p> 
<p title="Jenny mk">Mk</p>

4.[title|=mk]

設置全部title屬性具備多個連字號分隔（hyphen-separated）的值、其中一個值以"mk"開頭的標籤元素。

例：lang屬性："en"、"en-us"、"en-gb"等等

 [title|="mk"] 
    { 
        color: yellow; 
    } 
 
<p title="mk-Jenny">mk</p>

5.[title^=Nick]

設置屬性值以指定值開頭的每一個標籤元素。

[title^="mk"] 
    { 
        color: yellow; 
    } 
 
<p title="mkJenny">mk</p>

6.[title$=Nick]

設置屬性值以指定值結尾的每一個標籤元素。

[title$="mk"] 
    { 
        color: yellow; 
    } 
 
<p title="Jenny mk">mk</p>

7.[title*=Nick]

設置屬性值中包含指定值的每一個元素

[title*="mk"] 
    { 
        color: yellow; 
    } 
 
<p title="SmkJenny">mk</p>

僞類選擇器：

1. link、hover、active、visited

a:link（未訪問的連接狀態）,用於定義了常規的連接狀態。
a:hover（鼠標放在連接上的狀態）,用於產生視覺效果。
a:active（在連接上按下鼠標時的狀態）。
a:visited（已訪問過的連接狀態）,能夠看出已經訪問過的連接。

2. before、after

P:before 在每一個<p>元素的內容以前插入內容;
P:after 在每一個<p>元素的內容以後插入內容。

經常使用的屬性：

1. 顏色屬性：

color

HEX（十六進制色：color: #FFFF00 --> 縮寫：#FF0）
RGB（紅綠藍，使用方式：color:rgb(255,255,0)或者color:rgb(100%,100%,0%)）
RGBA（紅綠藍透明度，A是透明度在0~1之間取值。使用方式：color:rgba(255,255,0,0.5)）
HSL（CSS3有效,H表示色調，S表示飽和度，L表示亮度，使用方式：color:hsl(360,100%,50%)）
HSLA（和HSL類似，A表示Alpha透明度，取值0~1之間。）

transparent

全透明，使用方式：color: transparent

opacity

元素的透明度，語法：opacity: 0.5;
屬性值在0.0到1.0範圍內，0表示透明，1表示不透明。
filter濾鏡屬性（只適用於早期的IE瀏覽器，語法：filter:alpha(opacity:20);）。

2. 字體屬性:

font-style: 用於規定斜體文本

normal 文本正常顯示
italic 文本斜體顯示
oblique 文本傾斜顯示

font-weight: 設置文本的粗細

normal（默認）
bold（加粗）
bolder（至關於<strong>和<b>標籤）
lighter （常規）
100 ~ 900 整百（400=normal，700=bold）

font-size: 設置字體的大小

默認值：medium
<absolute-size>可選參數值：xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
<relative-size>相對於父標籤中字體的尺寸進行調節。可選參數值：smaller、 larger
<percentage>百分比指定文字大小。
<length>用長度值指定文字大小，不容許負值。

font-family：字體名稱

使用逗號隔開多種字體（優先級從前向後，若是系統中沒有找到當前字體，則日後面尋找）

font：簡寫屬性

語法：font：字體大小/行高字體;（字體要在最後）

3. 文本屬性:

white-space: 設置元素中空白的處理方式

normal：默認處理方式。
pre：保留空格，當文字超出邊界時不換行
nowrap：不保留空格，強制在同一行內顯示全部文本，直到文本結束或者碰到br標籤
pre-wrap：保留空格，當文字碰到邊界時換行
pre-line：不保留空格，保留文字的換行，當文字碰到邊界時換行

direction: 規定文本的方向

ltr 默認，文本方向從左到右。
rtl 文本方向從右到左。

text-align: 文本的水平對齊方式

left
center
right

line-height: 文本行高

normal 默認

vertical-align: 文本所在行高的垂直對齊方式

baseline 默認
sub 垂直對齊文本的下標，和<sub>標籤同樣的效果
super 垂直對齊文本的上標，和<sup>標籤同樣的效果
top 對象的頂端與所在容器的頂端對齊
text-top 對象的頂端與所在行文字頂端對齊
middle 元素對象基於基線垂直對齊
bottom 對象的底端與所在行的文字底部對齊
text-bottom 對象的底端與所在行文字的底端對齊

text-indent: 文本縮進

letter-spacing: 添加字母之間的空白

word-spacing: 添加每一個單詞之間的空白

text-transform: 屬性控制文本的大小寫

capitalize 文本中的每一個單詞以大寫字母開頭。
uppercase 定義僅有大寫字母。
lowercase 定義僅有小寫字母。

text-overflow: 文本溢出樣式

clip 修剪文本。
ellipsis 顯示省略符號...來表明被修剪的文本。
string 使用給定的字符串來表明被修剪的文本

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
    <style> 
        div { 
            width: 100px; 
            height: 100px; 
            white-space: nowrap; 
            overflow: hidden; 
            text-overflow: ellipsis; 
        } 
    </style> 
</head> 
<body> 
    <div>mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson</div> 
</body> 
</html>

文本溢出的樣式

text-decoration: 文本的裝飾

none 默認。
underline 下劃線。
overline 上劃線。
line-through 中線。

text-shadow：文本陰影

第一個參數是左右位置
第二個參數是上下位置
第三個參數是虛化效果
第四個參數是顏色
text-shadow: 5px 5px 5px #888;

word-wrap：自動換行

word-wrap: break-word;

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <style> 
        p { 
            width: 150px; 
            height: 160px; 
            background-color: #FFA500; 
            /*邊框陰影*/ 
            box-shadow: 10px 10px 5px #888; 
            /*自動換行*/ 
            word-wrap: break-word; 
        } 
        h1 { 
            text-shadow: 5px 5px 5px #888; 
        } 
    </style> 
</head> 
<body> 
    <p> 菊花殘，滿地傷，</p> 
    <h1>mosson</h1> 
</body> 
</html>

陰影

li{list-style：none}
a{text-decoration：none}

去掉li前的點-去掉a的下滑線

4. 背景屬性

background-color: 背景顏色

background-image 設置圖像爲背景

url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png"); 圖片地址

background-image:linear-gradient(green,blue,yellow,red,black); 顏色漸變效果

background-position 設置背景圖像的位置座標

background-position: center center; 圖片置中，x軸center，y軸center
1px -195px 截取圖片某部分，分別表明座標x，y軸

background-repeat 設置背景圖像不重複平鋪

no-repeat 設置圖像不重複，經常使用
round 自動縮放直到適應並填充滿整個容器
space 以相同的間距平鋪且填充滿整個容器

background-attachment 背景圖像是否固定或者隨着頁面的其他部分滾動

background 簡寫

background: url("o_ns.png") no-repeat 0 -196px;
background: url("o_ns.png") no-repeat center bottom 15px;
background: url("o_ns.png") no-repeat left 30px bottom 15px;

5. 列表屬性

list-style-type: 列表項標誌的類型

none 去除標誌
decimal-leading-zero; 02.
square; 方框
circle; 空心圓
upper-alph; & disc; 實心圓

list-style-image：將圖象設置爲列表項標誌

list-style-position：列表項標誌的位置

inside
outside

list-style：縮寫

頁面佈局：

1. 邊框

border-style：邊框樣式

solid 默認，實線
double 雙線
dotted 點狀線條
dashed 虛線

border-color：邊框顏色

border-width：邊框寬度

border-radius：圓角

1個參數：四個角都應用
2個參數：第一個參數應用於左上、右下；第二個參數應用於左下、右上
3個參數：第一個參數應用於左上；第二個參數應用於左下、右上；第三個參數應用於右下
4個參數：左上、右上、右下、左下（順時針

border: 簡寫

border: 2px yellow solid;

box-shadow：邊框陰影

第一個參數是左右位置
第二個參數是上下位置
第三個參數是虛化效果
第四個參數是顏色
box-shadow: 10px 10px 5px #888;

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <style> 
        div { 
            border:2px solid; 
            border-radius:25px; 
            width: 140px; 
        } 
    </style> 
</head> 
<body> 
    <div>看個人拐角</div> 
</body> 
</html>

div畫一個有弧度的角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .radius1 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: yellow;
            border-radius: 20px;
        }
        .radius2 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 20px 35px;
        }
        .radius3 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: blue;
            border-radius: 20px 35px 50px;
        }
        .radius4 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: green;
            border-radius: 20px 35px 50px 60px;
        }
        .radius5{
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: purple;
            border-radius: 50px 100px 50px 50px;
        }
        .radius6{
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: purple;
            border-radius: 50px 100px;
        }
    </style>
</head>
<body>
    <div>
        <span class="radius1"></span>
        <span class="radius2"></span>
        <span class="radius3"></span>
        <span class="radius4"></span>
        <span class="radius5"></span>
        <span class="radius6"></span>
    </div>
</body>
</html>

拐角有弧度的四邊形

將正方形切割成特殊的形狀：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <style> 
        .triangle-one { 
            display: inline-block; 
            border-top: 50px red solid; 
            border-right: 50px green solid; 
            border-bottom: 50px yellow solid; 
            border-left: 50px blue solid; 
        } 
        .triangle-two { 
            display: inline-block; 
            border-top: 0 red solid; 
            border-right: 50px green solid; 
            border-bottom: 50px yellow solid; 
            border-left: 50px blue solid; 
        } 
        .triangle-stree { 
            display: inline-block; 
            border-top: 50px red solid; 
            border-right: 0 green solid; 
            border-bottom: 50px yellow solid; 
            border-left: 50px blue solid; 
        } 
        .triangle-four { 
            display: inline-block; 
            border-top: 50px red solid; 
            border-right: 0 green solid; 
            border-bottom: 0 yellow solid; 
            border-left: 50px blue solid; 
        } 
  
        .triangle-five { 
            display: inline-block; 
            border: 50px transparent solid; 
            border-top: 50px red solid; 
        } 
        .triangle-six { 
            display: inline-block; 
            border: 50px transparent solid; 
            border-bottom: 50px yellow solid; 
        } 
        .triangle-seven { 
            display: inline-block; 
            border: 50px transparent solid; 
            border-top: 60px red solid; 
            border-right: 0; 
        } 
        .triangle-eight { 
            display: inline-block; 
            border: 50px transparent solid; 
            border-left: 30px yellow solid; 
            border-bottom: 0; 
        } 
    </style> 
</head> 
<body> 
    <div class="triangle-one"></div> 
    <div class="triangle-two"></div> 
    <div class="triangle-stree"></div> 
    <div class="triangle-four"></div> 
    <div class="triangle-five"></div> 
    <div class="triangle-six"></div> 
    <div class="triangle-seven"></div> 
    <div class="triangle-eight"></div> 
</body> 
</html>

切割正方形獲得特殊的形狀

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .back {
            /*整個畫布的背景寬度、高度、顏色*/
            width: 1000px;
            height: 1000px;
            margin: 0 auto;
            background-color: #ddd;
            position: relative;
        }
        .back-in {
            /*放標題的位置*/
            position: absolute;
            width: 1020px;
            height: 45px;
            left: -20px;
            top: 50px;
            background-color: #2F4F4F;
        }
        .back-img {
            /*灰色角標*/
            border: 20px solid transparent;
            border-top: 10px solid dimgrey;
            border-right: 0;
            display: inline-block;
            position: absolute;
            top: 95px;
            left: -20px;
        }
        .back-font {
            line-height: 45px;
            margin-left: 30px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="back">
        <div class="back-in"><span class="back-font">雨一直下，氣氛還算融洽，...</span></div>
        <div class="back-img"></div>
    </div>
</body>
</html>

陰影的角標

二、盒子模型：

padding:用於控制內容與邊框之間的距離;

margin: 用於控制元素與元素之間的距離;

padding、margin	表示上右下左都應用
padding-top、margin-top	上
padding-right、margin-right	右
padding-bottom、margin-bottom	下
padding-left、margin-left	左

　一個參數，應用於四邊。

　兩個參數，第一個用於上、下，第二個用於左、右。

　三個參數，第一個用於上，第二個用於左、右，第三個用於下。

當咱們寫html的時候；在咱們寫body與瀏覽器之間還存在一塊的空白區域

body{

margin：0；

}

3. display

none 不顯示。
block 顯示爲塊級元素。
inline 顯示爲內聯元素。
inline-block 行內塊元素（會保持塊元素的高寬）。
list-item 顯示爲列表元素。

4. visibility

visible 元素可見
hidden 元素不可見
collapse 當在表格元素中使用時，此值可刪除一行或一列，不會影響表格的佈局。

5. float 浮動

讓一行顯示兩個或多個塊級標籤，會脫離文檔流；若是浮動起來的標籤的父級標籤沒有內容；那麼父標籤將消失；

none
left 左浮動
right 右浮動

clear 清除浮動：

none : 默認值。容許兩邊均可以有浮動對象
left : 不容許左邊有浮動對象
right : 不容許右邊有浮動對象
both : 不容許兩邊有浮動對象

6. clip 剪裁圖像

rect 剪裁定位元素：

auto 默認值，無剪切
上-右-下-左（順時針）的順序提供四個偏移值
區域外的部分是透明的
必須指定 position:absolute;
例：clip:rect(0px,60px,200px,0px);

7. overflow 設置當對象的內容超過其指定高度及寬度時如何顯示內容

visible 默認值，內容不會被修剪，會呈如今元素框以外。
hidden 內容會被修剪，而且其他內容是不可見的。
scroll 內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
auto 若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。

8. position 規定元素的定位類型

static	默認值，沒有定位，聽從正常的文檔流
relative	相對定位元素，相對於其正常位置進行定位，聽從正常的文檔流
absolute	絕對定位元素，脫離正常文檔流
fixed	絕對定位元素，固定在瀏覽器某處

經過如下四種屬性進行定位：

left
top
right
bottom
z-index

9. z-index 元素層疊順序

z-index 僅在定位元素上有效（例：position:absolute;）
能夠指定負數屬性值（例：-1;）

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <style> 
        .z-index1 { 
            width: 100px; 
            height: 100px; 
            background-color: yellow; 
            position: absolute; 
            z-index: -1; 
        } 
        .z-index2 { 
            width: 100px; 
            height: 100px; 
            background-color: red; 
            position: absolute; 
            top: 20px; 
            left: 20px; 
            z-index: 5; 
        } 
    </style> 
</head> 
<body> 
    <div class="z-index1"></div> 
    <div class="z-index2"></div> 
</body> 
</html

z-index

10. outline 邊框輪廓

outline-width 輪廓寬度
outline-color 輪廓顏色
outline-style 輪廓樣式

11. zoom 縮放比例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .zoom1 {
            zoom: 100%;
        }
        .zoom2 {
            zoom: 150%;
        }
        .zoom3 {
            zoom: 200%;
        }
    </style>
</head>
<body>
    <div class="zoom1"> 100%</div>
    <div class="zoom2">200%</div>
    <div class="zoom3">300%</div>
</body>
</html>

zoom縮放比例

12. cursor 鼠標的類型形狀

鼠標放在如下單詞上，There will be a miracle：

url: 自定義光標

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
    <style>
        body {
            cursor: url("mouse.png"), auto;
            /*圖片地址：http://images.cnblogs.com/cnblogs_com/suoning/845162/o_mouse.png*/
        }
    </style>
</head>
<body>
    <div><img src="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" height="100%" width="100%"></div>
</body>
</html>

自定義光標實例

Auto: 默認
  Default: 默認
  e-resize
  ne-resize
  nw-resize
  n-resize
  se-resize
  sw-resize
  s-resize
  w-resize
  Crosshair
  Pointer
  Move
  text
  wait
  help

13. transform、transition 動畫效果

transform 轉換，變形

origin 定義旋轉基點（left top center right bottom 座標值） transform-origin: 50px 50px; transform-origin: left;。
rotate 旋轉 transform:rotate(50deg) 旋轉角度能夠爲負數，須要先定義origin。
skew 扭曲 transform:skew(50deg,50deg) 分別爲相對x軸傾斜,相對y軸傾斜。
scale 縮放 transform:scale(2,3) 橫向放大2倍，縱向放大3倍；transform:scale(2) 橫豎都放大2倍。
translate 移動 transform:translate(50px, 50px) 分別爲相對x軸移動,相對y軸移動

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>nick</title> 
    <meta charset="utf-8" /> 
    <style type="text/css"> 
        div { 
            border: 1px solid black; 
            height: 30px; 
            width: 30px; 
            background-color: yellow; 
  
            /*transform-origin: 50px 50px;*/ 
            transform-origin: left; 
            transform: rotate(50deg); 
            /*transform: skew(50deg,50deg);*/ 
            /*transform: translate(50px,50px);*/ 
            /*transform: scale(2);*/ 
        } 
    </style> 
</head> 
<body> 
    <div></div> 
</body> 
</html>

transform、transition 動畫效果

Transition 平滑過渡

transition-property：變換的屬性（none(沒有屬性改變)、all(全部屬性改變)、具體屬性）
transition-duration：變換持續時間
transition-timing-function：變換的速率（ease:(逐漸變慢)、linear:(勻速)、ease-in:(加速)、ease-out:(減速)、ease-in-out:(加速而後減速)、cubic-bezier:(自定義時間曲線））
transition-delay：變換延遲時間
transition：縮寫

#property 指定屬性對應類型

一、color： 經過紅、綠、藍和透明度組件變換（每一個數值單獨處理），如：background-color，border-color，color，outline-color等CSS屬性；

二、length：真實的數字，如：word-spacing，width，vertical- align，top，right，bottom，left，padding，outline-width，margin，min-width，min- height，max-width，max-height，line-height，height，border-width，border- spacing，background-position等屬性；

三、percentage：真實的數字，如：word-spacing，width，vertical- align，top，right，bottom，left，min-width，min- height，max-width，max-height，line-height，height，background-position等屬性；

四、integer 離散步驟（整個數字），在真實的數字空間，以及使用floor()轉換爲整數時發生，如：outline-offset，z-index等屬性；

五、number真實的（浮點型）數值，如：zoom，opacity，font-weight等屬性；

6、transform list。

7、rectangle：經過x、 y、 width和height（轉爲數值）變換，如：crop；

8、visibility：離散步驟，在0到1數字範圍以內，0表示「隱藏」，1表示徹底「顯示」,如：visibility；

九、shadow：做用於color、x、y、和blur（模糊）屬性，如：text-shadow；

十、gradient：經過每次中止時的位置和顏色進行變化。它們必須有相同的類型（放射狀的或是線性的）和相同的中止數值以便執行動畫，如：background-image；

11、paint server (SVG)：只支持下面的狀況：從gradient到gradient以及color到color，而後工做與上面相似；

十二、space-separated list of above：若是列表有相同的項目數值，則列表每一項按照上面的規則進行變化，不然無變化；

1三、a shorthand property：若是縮寫的全部部分均可以實現動畫，則會像全部單個屬性變化同樣變化。

property 指定屬性對應類型

#支持執行transition效果的屬性

Property Name    Type
background-color    as color
background-position    as repeatable list of simple list of length, percentage, or calc
border-bottom-color    as color
border-bottom-width    as length
border-left-color    as color
border-left-width    as length
border-right-color    as color
border-right-width    as length
border-spacing    as simple list of length
border-top-color    as color
border-top-width    as length
bottom    as length, percentage, or calc
clip    as rectangle
color    as color
font-size    as length
font-weight    as font weight
height    as length, percentage, or calc
left    as length, percentage, or calc
letter-spacing    as length
line-height    as either number or length
margin-bottom    as length
margin-left    as length
margin-right    as length
margin-top    as length
max-height    as length, percentage, or calc
max-width    as length, percentage, or calc
min-height    as length, percentage, or calc
min-width    as length, percentage, or calc
opacity    as number
outline-color    as color
outline-width    as length
padding-bottom    as length
padding-left    as length
padding-right    as length
padding-top    as length
right    as length, percentage, or calc
text-indent    as length, percentage, or calc
text-shadow    as shadow list
top    as length, percentage, or calc
vertical-align    as length
visibility    as visibility
width    as length, percentage, or calc
word-spacing    as length
z-index    as integer