CSS 基礎篇、絕對有你想要
本章內容：css
- 簡介
- 選擇器（Selector）
- 經常使用屬性
- 顏色屬性（color 、transparent、opacity）
- 字體屬性（font-style、 font-weight、font-size、 font-family、font）
- 文本屬性（white-space、direction、text-align、line-height、vertical-align、text-indent、letter-spacing、word-spacing、 text-transform、text-overflow、text-decoration、text-shadow、word-wrap）
- 背景屬性（background-color、background-image、background-position、background-repeat、background-attachment、background）
- 列表屬性（list-style-type、list-style-image、list-style-position、list-style）
- 頁面佈局
- 邊框（border-style、border-color、border-width、border-radius、border、box-shadow）
- 盒子模型（padding、margin）
- display
- visibility
- float 浮動
- clip 剪裁圖像
- overflow 設置當對象的內容超過其指定高度及寬度時如何顯示內容
- position 規定元素的定位類型（static、relative、absolute、fixed）
- z-index 元素層疊順序
- outline 邊框輪廓
- zoom 縮放比例
- cursor 鼠標的類型形狀（Crosshair、Pointer、Move、text、wait、help...）
- transform、transition 動畫效果
| 簡介 |
CSS 是什麼？html
CSS是Cascading Style Sheets的簡稱，中文稱爲層疊樣式表。api
屬性和屬性值用冒號隔開，以分號結尾。瀏覽器
CSS 四種引入方式：ssh
1.行內式ide
行內式是在標籤的style屬性中設定CSS樣式。佈局
<div style="..."></div>
2.嵌入式字體
嵌入式是將CSS樣式集中寫在網頁的<head>標籤的<style></style>標籤對中。動畫
<head>
...
<style type="text/css">
...此處寫CSS樣式
</style>
</head>
3.導入式
將一個獨立的.css文件引入HTML文件中，導入式使用@import 引入外部CSS文件，<style>標記也是寫在<head>標記中。ui
導入式會在整個網頁裝載完後再裝載CSS文件。
<head>
...
<style type="text/css">
@import "My.css"; 此處注意.css文件的路徑
</style>
</head>
4.連接式
將一個獨立的.css文件引入到HTML文件中，使用<link>標記寫在<head>標記中。
連接式會以網頁文件主體裝載前裝載CSS文件。
<head>
...
<link href="My.css" rel="stylesheet" type="text/css">
</head>
樣式應用順序：
- 行內樣式優先級最高
- 針對相同的樣式屬性，不一樣的樣式屬性將以合併的方式呈現
- 相一樣式而且相同屬性，呈現方式在<head>中的順序決定，後面會覆蓋前面屬性
-
!important
指定樣式規則應用最優先
.nick {
color: yellow !important;
}
| 選擇器（Selector） |
基本選擇器：
1.通用元素選擇器
* 表示應用到全部的標籤。
* {color: yellow}
2.標籤選擇器
匹配全部使用 div 標籤的元素（能夠匹配全部標籤）
div {color: yellow}
3.類選擇器
匹配全部class屬性中包含info的元素。
語法：.類名{樣式}（類名不能以數字開頭，類名要區分大小寫。）
.Mycolor {color: yellow}
<h3 class="Mycolor">nick</h3>
4.ID選擇器
使用id屬性來調用樣式，在一個網頁中id的值都是惟一的（是W3C規範而不是規則，因此不會報錯）。
語法：#ID名{樣式}（ID名不能以數字開頭）
#Mycolor {color: yellow}
<h3 id="Mycolor">Nick.</h3>
組合選擇器：
1.多元素選擇器
同時匹配h3,h4標籤，之間用逗號分隔。
h3,h4 {color: yellow;}
<h3>Nick</h3>
<h4>Jenny</h4>
2.後代元素選擇器
匹配全部div標籤裏嵌套的P標籤，之間用空格分隔。
div p {color: yellow;}
<div>
<p>Nick</p>
<div>
<p>Nick</p>
</div>
</div>
3.子元素選擇器
匹配全部div標籤裏嵌套的子P標籤，之間用>分隔。
div > p {color: yellow;}
<div>
<p>Nick</p>
<p>Nick</p>
</div>
4.毗鄰元素選擇器
匹配全部緊隨div標籤以後的同級標籤P，之間用+分隔（只能匹配一個）。
div + p {color: yellow;}
<div>Nick</div>
<p>Nick</p>
屬性選擇器：
1.[title] & P[title]
設置全部具備title屬性的標籤元素；
設置全部具備title屬性的P標籤元素。
[title]
{
color: yellow;
}
p[title]
{
color: yellow;
}
<div title>Nick</div>
<p title>Nick</p>
2.[title=Nick]
設置全部title屬性等於「Nick」的標籤元素。
[title="Nick"]
{
color: yellow;
}
<p title="Nick">Nick</p>
3.[title~=Nick]
設置全部title屬性具備多個空格分隔的值、其中一個值等於「Nick」的標籤元素。
[title~="Nick"]
{
color: yellow;
}
<p title="Nick Jenny">Nick</p>
<p title="Jenny Nick">Nick</p>
4.[title|=Nick]
設置全部title屬性具備多個連字號分隔（hyphen-separated）的值、其中一個值以"Nick"開頭的標籤元素。
例：lang屬性："en"、"en-us"、"en-gb"等等
[title|="Nick"]
{
color: yellow;
}
<p title="Nick-Jenny">Nick</p>
5.[title^=Nick]
設置屬性值以指定值開頭的每一個標籤元素。
[title^="Nick"]
{
color: yellow;
}
<p title="NickJenny">Nick</p>
6.[title$=Nick]
設置屬性值以指定值結尾的每一個標籤元素。
[title$="Nick"]
{
color: yellow;
}
<p title="JennyNick">Nick</p>
7.[title*=Nick]
設置屬性值中包含指定值的每一個元素
[title*="Nick"]
{
color: yellow;
}
<p title="SNickJenny">Nick</p>
僞類選擇器：
1. link、hover、active、visited
- a:link（未訪問的連接狀態）,用於定義了常規的連接狀態。
- a:hover（鼠標放在連接上的狀態）,用於產生視覺效果。
- a:active（在連接上按下鼠標時的狀態）。
- a:visited（已訪問過的連接狀態）,能夠看出已經訪問過的連接。
a:link{color: black}
a:hover{color: yellow}
a:active{color: blue}
a:visited{color: red}
<a href="#">Nick</a>
2. before、after
- P:before 在每一個<p>元素的內容以前插入內容;
- P:after 在每一個<p>元素的內容以後插入內容。
p {
color: yellow;
}
p:before{
content: "before...";
}
p:after{
content: "after...";
}
<p> Nick </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>索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧</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>
When you are old and grey and full of sleep,And nodding by the fire, take down this book,And slowly read, and dream of the soft look
</p>
<h1>索寧</h1>
</body>
</html>
a {
text-decoration: none;
/*去除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>
點贊哦！dear.
</div>
</body>
</html>
<!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;
}
</style>
</head>
<body>
<div>
<span class="radius1"></span>
<span class="radius2"></span>
<span class="radius3"></span>
<span class="radius4"></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>
.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: 9px;
margin-left: 30px;
color: white;
}
</style>
</head>
<body>
<div class="back">
<div class="back-in"><h3 class="back-font">妹子求關注 ^.^</h3></div>
<div class="back-img"></div>
</div>
</body>
</html>
2.★ 盒子模型
一個標準的盒子模型：
padding:用於控制內容與邊框之間的距離;
margin: 用於控制元素與元素之間的距離;
| padding、margin | 表示上右下左都應用 |
| padding-top、margin-top | 上 |
| padding-right、margin-right | 右 |
| padding-bottom、margin-bottom | 下 |
| padding-left、margin-left | 左 |
一個參數，應用於四邊。
兩個參數，第一個用於上、下，第二個用於左、右。
三個參數，第一個用於上，第二個用於左、右，第三個用於下。
邊框在默認狀況下會定位於瀏覽器窗口的左上角，可是並無緊貼着瀏覽器的窗口的邊框，這是由於body自己也是一個盒子，外層還有html，
在默認狀況下，body距離html會有若干像素的margin，因此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>
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">Nick 100%</div>
<div class="zoom2">Nick 200%</div>
<div class="zoom3">Nick 300%</div>
</body>
</html>
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
not-allowed
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>
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等屬性；
六、transform list。
七、rectangle：經過x、 y、 width和height（轉爲數值）變換，如：crop；
八、visibility：離散步驟，在0到1數字範圍以內，0表示「隱藏」，1表示徹底「顯示」,如：visibility；
九、shadow：做用於color、x、y、和blur（模糊）屬性，如：text-shadow；
十、gradient：經過每次中止時的位置和顏色進行變化。它們必須有相同的類型（放射狀的或是線性的）和相同的中止數值以便執行動畫，如：background-image；
十一、paint server (SVG)：只支持下面的狀況：從gradient到gradient以及color到color，而後工做與上面相似；
十二、space-separated list of above：若是列表有相同的項目數值，則列表每一項按照上面的規則進行變化，不然無變化；
1三、a shorthand 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
鼠標放在如下圖片上，There will be a miracle：
<!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"> .img-see-2016-7-2 { background-image: url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_sea.jpg"); background-size: 660px; background-repeat: no-repeat; height: 300px; width: 600px; transition-duration: 30s; transition-timing-function: ease; transition-property: background-size; } .img-see-2016-7-2:hover { background-size: 2000px; } </style> </head> <body> <div class="img-see-2016-7-2"></div> </body> </html>
相關文章
- 1. CSS 基礎篇、絕對有你想要
- 2. openseadragon實戰系列基礎篇（有你想要的乾貨）
- 3. iOS小技巧總結，絕對有你想要的
- 4. iOS小技巧總結，絕對有你想要的（下）
- 5. CSS基礎篇--css reset重置樣式有那麼重要嗎？
- 6. css絕對對齊
- 7. CSS基礎篇（二）
- 8. HTML - CSS 基礎篇
- 9. CSS 絕對定位
- 10. css絕對佈局
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • 再有人問你分佈式事務，把這篇扔給他
- • Kotlin學習（二）基本類型
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. CSS 基礎篇、絕對有你想要
- 2. openseadragon實戰系列基礎篇（有你想要的乾貨）
- 3. iOS小技巧總結，絕對有你想要的
- 4. iOS小技巧總結，絕對有你想要的（下）
- 5. CSS基礎篇--css reset重置樣式有那麼重要嗎？
- 6. css絕對對齊
- 7. CSS基礎篇（二）
- 8. HTML - CSS 基礎篇
- 9. CSS 絕對定位
- 10. css絕對佈局