CSS3和動畫
阿新 • • 發佈：2018-06-09
chrom utf oct ddd 放大 img net 慢慢 inf
定位：
z-index疊層 數字越大越往上層
註意：要用z-index屬性必須設position屬性
溢出：overflow
屬性值：visible 不剪切內容也不添加滾動條
Auto 在必需時對象內容才會被裁切或顯示滾動條
hidden 不顯示超過對象尺寸的內容
scroll 總是顯示滾動條，強制加滾動條
Overflow-x x軸方向溢出
overflow-y y軸方向溢出
縮放：
Zoom 放大、縮小
邊框：border
border-radius 圓角
實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
div{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
}
</style>
</head>
<body>
<div>border-radius 屬性允許您為元素添加圓角邊框！ </div>
</body>
</html>
結果為：
box-shadow 陰影
實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
結果為：
border-image 圖片
border-image: source slice width outset repeat|initial|inherit;
border-image-source 用於指定要用於繪制邊框的圖像的位置
border-image-slice 圖像邊界向內偏移
border-image-width 圖像邊界的寬度
border-image-outset 用於指定在邊框外部繪制 border-image-area 的量
border-image-repeat 用於設置圖像邊界是否應重復（repeat）、拉伸（stretch）或鋪滿（round）。
實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
div{
border:15px solid transparent;
width:250px;
padding:10px 20px;
}
#round
{
border-image:url(border.png) 30 30 round;
}
#stretch
{
border-image:url(border.png) 30 30 stretch;
}
</style>
</head>
<body>
<p>
<b>註意: </b>
Internet Explorer 不支持 border-image 屬性。
</p>
<p> border-image 屬性用於設置圖片的邊框。</p>
<div id="round">這裏，圖像平鋪（重復）來填充該區域。</div>
<br>
<div id="stretch">這裏，圖像被拉伸以填充該區域。</div>
<p>這是我們使用的圖片素材：</p>
<img src="/images/border.png" />
</body>
</html>
結果為：
背景：
background-size：指定背景大小
實例：
div{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
漸變：
線性漸變：從上到下：
實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
#grad1 {
height: 200px;
background: linear-gradient(red, blue); /* 標準的語法（必須放在最後） */
}
</style>
</head>
<body>
<h3>線性漸變 - 從上到下</h3>
<p>從頂部開始的線性漸變。起點是紅色，慢慢過渡到藍色：</p>
<div id="grad1"></div>
<p>
<strong>註意：</strong>
Internet Explorer 9 及之前的版本不支持漸變。
</p>
</body>
</html>
結果為：
線性漸變從左到右
實例：
background: linear-gradient(to right, red , blue); /* 標準的語法 */
線性漸變對角
實例：
<style>
#grad1 {
height: 200px;
background: linear-gradient(to bottom right, red , blue); /* 標準的語法（必須放在最後） */
}
</style>
結果為：
漸變使用角度：
實例：
#grad2 {
height: 100px;
background: linear-gradient(90deg, red, blue); /* 標準的語法（必須放在最後） */
}
結果：
使用多個顏色結點
實例：
#grad1 {
height: 200px;
background: linear-gradient(red, green, blue); /* 標準的語法（必須放在最後） */
}
結果為：
2D轉換：
實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
div{
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(30deg);
}
</style>
</head>
<body>
<div>Hello</div>
</body>
</html>
結果：
過渡：transition
實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
div{
width:100px;
height:100px;
background:red;
transition:width 2s;
}
div:hover{
width:300px;
}
</style>
</head>
<body>
<p>
<b>註意：</b>
該實例無法在 Internet Explorer 9 及更早 IE 版本上工作。
</p>
<div></div>
<p>鼠標移動到 div 元素上，查看過渡效果。</p>
</body>
</html>
動畫;
實例：
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
div{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
}
@keyframes myfirst{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<p>
<b>註意:</b>
該實例在 Internet Explorer 9 及更早 IE 版本是無效的。
</p>
<div></div>
</body>
</html>
當動畫為 25% 及 50% 時改變背景色，然後當動畫 100% 完成時再次改變：
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
div{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
}
@keyframes myfirst{
0% {
background:red;
}
25% {
background:yellow;
}
50% {
background:blue;
}
100% {
background:green;
}
}
</style>
</head>
<body>
<div></div>
<p>
<b>註釋：</b>
當動畫完成時，會變回初始的樣式。
</p>
<p>
<b>註意:</b>
該實例在 Internet Explorer 9 及更早 IE 版本是無效的。
</p>
</body>
</html>
動畫屬性：
實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
div{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Safari and Chrome: */
}
@keyframes myfirst{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p>
<b>註意:</b>
該實例在 Internet Explorer 9 及更早 IE 版本是無效的。
</p>
<div></div>
</body>
</html>
CSS3和動畫