大家好，這里是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......
- github：https://github.com/Daotin/Web
- 微信公眾號：Web前端之巔
- 博客園：http://www.cnblogs.com/lvonve/
- CSDN：https://blog.csdn.net/lvonve/
在這里我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！
一、邊框圖片
邊框圖片：就是給邊框加圖片背景。
我們之前加的邊框都是純顏色的邊框，那么我們怎么給邊框加圖片呢？
原理：把一張圖片分成九宮格的形式，然后一一對應到需要添加邊框的元素上。
並且，添加邊框圖片是以背景的方式添加的，所以會有可能文字覆蓋在邊框的情況，后面也會介紹處理方法。
語法：
/* border-image-source:可以指定邊框圖片的路徑,默認只是填充到容器的四個角點 */
border-image-source: url("../images/border1.png");
/* border-image-slice:設置四個方向上的裁切距離, fill:做內容的內部填充 */
border-image-slice: 27 fill;
/* 如果四個邊框的寬度不同，可以設置4個值*/
border-image-slice: 27 10; /*左右27 上下10*/
border-image-slice: 27 20 15 5 fill; /*左27 下20 右15 上5*/
/*border-image-width:邊框圖片的寬度。如果沒有設置這個屬性，那么寬度默認就是元素的原始的邊框寬度。
細節：
1.邊框圖片的本質是背景，並不會影響元素內容的放置
2.內容只會被容器的border和padding影響
建議：一般將值設置為原始的邊框的寬度*/
border-image-width: 27px;
/*border-image-outset:擴展邊框：將邊框擴大，但是會影響元素的大小，box-sizing也不可挽回，建議不使用。*/
border-image-outset: 0px;
/*border-image-repeat:
repeat:直接重復平鋪，可能有不完整的圖像
round:將內容縮放進行完整的重復平鋪
stretch:將內容拉伸（此為默認值）*/
border-image-repeat: round;
以上的內容可以連寫（注意有的屬性需要用 / 分隔）：
/*border-image: source slice / width / outset repeat;*/
border-image: url("../images/border1.png") 27 fill / 27px / 0px round;
案例：QQ氣泡
我們在發QQ消息的時候，可以選擇很多不同的氣泡樣式，而且當我們發消息的時候，不管文字的多少，氣泡邊框的樣式不變，而只是中間內容的填充。如果只是簡單的氣泡拉伸的話，邊角就會變得丑陋，所以就需要用到邊框圖片的技術。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: auto;
margin:10px auto;
border: 20px solid red;
border-image: url("./images/timg.jpg");
border-image-slice: 20 fill;
border-image-width: 20px;
border-image-outset: 0px;
border-image-repeat: stretch;
}
</style>
</head>
<body>
<div>你好，在么？</div>
<div>在的</div>
</body>
</html>
二、過渡
通過過渡 transition,我們可以在不使用 Flash 動畫或 JavaScript 的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果。
要實現這一點，必須規定兩項內容：
-
1.規定希望把效果添加到哪個 CSS 屬性上；
-
2.規定效果的時長。
1、基本語法
/*1.transition-property:添加過渡效果的樣式屬性名稱*/
transition-property: left;
/*2.transition-duration:過渡效果的耗時 以秒做為單位*/
transition-duration: 2s;
/*3.transition-timing-function:設置時間函數--控制運動的速度*/
transition-timing-function: linear;
/*
參數說明：
steps(n)：n代表次數，就是動畫分幾次走完。（比如秒針的走動）
linear：規定以相同速度開始至結束的過渡效果。
ease：規定慢速開始，然后變快，然后慢速結束的過渡效果。
ease-in：規定以慢速開始的過渡效果。
ease-out：規定以慢速結束的過渡效果。
ease-in-out：規定以慢速開始和結束的過渡效果。
*/
/*4.transition-delay:過渡效果的延遲，間隔多少時間后才開始動畫。*/
transition-delay: 2s;
注意：添加過渡效果:過渡效果執行完畢之后，默認會還原到原始狀態。
2、連寫樣式
transition: property duration timing-function delay;
參數說明：
property：屬性名稱
duration：過渡時間
timing-function：時間函數
delay：延遲時間
為多個樣式同時添加過渡效果：（之間用逗號隔開）
transition: left 2s linear 0s,
background-color 5s linear 0s;
為所有樣式添加過渡效果：all：所有樣式
transition:all 2s steps(4);
缺點：
- 所有樣式的過渡效果一樣。
- 效率低下，它會去查詢所有添加的樣式。
- 建議不要這么寫。
3、使用建議
因為 transition 最早是有由 webkit 內核瀏覽器提出來的，mozilla 和 opera 都是最近版本才支持這個屬性，而我們的大眾型瀏覽器 IE 全家都是不支持，另外由於各大現代瀏覽器 Firefox,Safari,Chrome,Opera 都還不支持 W3C的標准寫法，所以在應用 transition 時我們有必要加上各自的前綴，最好在最后寫上我們 W3C 的標准寫法，這樣支持標准寫法的瀏覽器會覆蓋前面的寫法，只要瀏覽器支持我們的 transition 屬性，那么這種效果就會自動加上去，如：
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease; /*放在最后*/
4、案例：手風琴效果
效果：鼠標放在每個標簽上，會慢慢下拉出詳細內容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.menu {
width: 200px;
height: auto;
margin: 100px auto;
}
.item {
width: 100%;
height: auto;
}
.item > h3 {
height: 40px;
line-height: 40px;
background-color: rgb(146, 210, 226);
padding: 5px 0 5px 10px;
border-bottom: 2px solid #ccc;
}
.item > .itemBox {
width: 100%;
height: 0;
background-color: rgb(248, 187, 233);
overflow: hidden;
}
.itemBox > ul {
list-style: none;
padding: 10px 10px;
}
.item:hover > .itemBox {
height: 110px;
transition: height 0.5s;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<h3>市內新聞</h3>
<div class="itemBox">
<ul>
<li>深圳超市肉菜檔遭搶</li>
<li>深圳超市肉菜檔遭搶</li>
<li>深圳超市肉菜檔遭搶</li>
<li>深圳超市肉菜檔遭搶</li>
</ul>
</div>
</div>
<div class="item">
<h3>省內新聞</h3>
<div class="itemBox">
<ul>
<li>深圳超市肉菜檔遭搶</li>
<li>深圳超市肉菜檔遭搶</li>
<li>深圳超市肉菜檔遭搶</li>
<li>深圳超市肉菜檔遭搶</li>
</ul>
</div>
</div>
<div class="item">
<h3>國內新聞</h3>
<div class="itemBox">
<ul>
<li>深圳超市肉菜檔遭搶</li>
<li>深圳超市肉菜檔遭搶</li>
<li>深圳超市肉菜檔遭搶</li>
<li>深圳超市肉菜檔遭搶</li>
</ul>
</div>
</div>
<div class="item">
<h3>國際新聞</h3>
<div class="itemBox">
<ul>
<li>深圳超市肉菜檔遭搶</li>
<li>深圳超市肉菜檔遭搶</li>
<li>深圳超市肉菜檔遭搶</li>
<li>深圳超市肉菜檔遭搶</li>
</ul>
</div>
</div>
</div>
</body>
</html>
