從零開始學 Web 之 CSS3（四）邊框圖片，過渡
一、邊框圖片
邊框圖片：就是給邊框加圖片背景。
我們之前加的邊框都是純顏色的邊框，那麼我們怎麼給邊框加圖片呢？
原理：把一張圖片分成九宮格的形式，然後一一對應到需要新增邊框的元素上。
並且，新增邊框圖片是以背景的方式新增的，所以會有可能文字覆蓋在邊框的情況，後面也會介紹處理方法。
語法：
/* 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>
相關推薦
從零開始學 Web 之 CSS3（四）邊框圖片，過渡
一、邊框圖片 邊框圖片：就是給邊框加圖片背景。 我們之前加的邊框都是純顏色的邊框，那麼我們怎麼給邊框加圖片呢？ 原理：把一張圖片分成九宮格的形式，然後一一對應到需要新增邊框的元素上。 並且，新增邊框圖片是以背景的方式新增的，所以會有可能文字覆蓋在邊框的情況，後面也會介紹處理方法。 語法： /* bord
從零開始學 Web 之 CSS3（二）顏色模式，文字陰影，盒模型，邊框圓角，邊框陰影
一、顏色模式 顏色模式有兩種： RGBA rgba(0,0,0,0.5); //黑色，透明度0.5 HSLA（顏色(0~360)，飽和度(0%~100%)，明度(0%~100%)，透明度(0~1)） 紅橙黃綠青藍紫紅：顏色從 0~360 順序，各佔30度。比如紅色為0，黃色為120，綠色為240。
從零開始學 Web 之 CSS3（六）動畫animation，Web字型
大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 部落格園：http://www.cnblogs.com/lvonve/ CSDN：https://blog.csdn.net/lvonve/
從零開始學 Web 之 CSS3（一）CSS3概述，選擇器
https 兼容問題 3.1 線性 web前端 不同 錨點 splay lock 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔
從零開始學 Web 之 CSS3（五）transform
transform transform 字面上就是變形，改變的意思。在CSS3中transform主要包括以下幾種：移動 translate，縮放scale，旋轉rotate，翻轉skew，改變旋轉軸心等。 1、元素的移動：translate 作用：使用transform實現元素的移動 語法： /*使用t
從零開始學 Web 之 CSS3（三）漸變，background屬性
一、漸變 漸變是CSS3當中比較豐富多彩的一個特性，通過漸變我們可以實現許多炫麗的效果，有效的減少圖片的使用數量，並且具有很強的適應性和可擴充套件性。可分為線性漸變、徑向漸變。 1、線性漸變 線性漸變：指沿著某條直線朝一個方向產生漸變效果。 語法： background: linear-gradient(
從零開始學 Web 之 CSS3（八）CSS3三個案例
一、CSS3三個案例 1、案例一：攜程網首頁 需求：頁面無橫向滾動條，頁面隨著寬度的改變自動伸縮。 程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l
從零開始學 Web 之 CSS3（七）多列布局，伸縮佈局
一、多列布局 CSS3中新出現的多列布局 (multi-column) 是傳統 HTML 網頁中塊狀佈局模式的有力擴充。 這種新語法能夠讓 WEB 開發人員輕鬆的讓文字呈現多列顯示。 我們知道，當一行文字太長時，讀者讀起來就比較費勁，有可能讀錯行或讀序列；人們的視點從文字的一端移到另一端、然後換到下一行的
從零開始學 Web 之 DOM（四）節點
def clas scrip while p標簽 設置 ner 操作 text 大家好，這裏是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相
從零開始學 Web 之 jQuery（七）事件冒泡，事件參數對象，鏈式編程原理
eval uri turn 定位 return 也會 否則 ont sele 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客
從零開始學 Web 之 Ajax（三）Ajax 概述，快速上手
lan 技術分享 php 概述 由於 val asc logs 更新 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客園：ht
從零開始學 Web 之 HTML5（二）表單，多媒體新增內容，新增獲取操作元素，自定義屬性
器） user 對比 style 按鈕 ont mp3 url -- 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客園：ht
從零開始學 Web 之 jQuery（三）元素操作，鏈式程式設計，動畫方法
一、使用css操作元素樣式 1、常規寫法 $("#dv").css("width", "200px"); $("#dv").css("height", "100px"); $("#dv").css("background", "red"); 2、鏈式寫法 $("#dv").css("width", "20
從零開始學 Web 之 HTML5（一）HTML5概述，語義化標籤
一、HTML5簡介 1、什麼是html5 html5 不是一門新的語言，而是我們之前學習的 html 的第五次重大修改版本。 2、html的發展歷史 超文字標記語言（第一版，不叫 HTML 1.0）——在1993年6月作為網際網路工程工作小組（IETF）工作草案發布（並非標準）； HTML 2.0——19
從零開始學 Web 之 BOM（四）client系列
一、client 系列 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style
從零開始學 Web 之 ES6（四）ES6基礎語法二
一、Promise Promise是一個物件，代表了未來某個將要發生的事件(，這個事件通常是一個非同步操作) 有了Promise物件, 可以將非同步操作以同步的流程表達出來, 避免了層層巢狀的回撥函式(俗稱'回撥地獄')。 ES6的Promise是一個建構函式, 用來生成promise例項。 1、prom
從零開始學 Web 之 JavaScript（四）陣列
大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 一、陣列 1、陣列
從零開始學 Web 之 jQuery（七）事件冒泡，事件引數物件，鏈式程式設計原理
一、事件冒泡與阻止事件冒泡 事件冒泡：當一個元素觸發某個事件的時候，會把這個事件傳播到其父元素，一直到頂層元素。 阻止事件冒泡：在被觸發事件的子元素中新增 return false; 即可。 二、事件的觸發 之前講的繫結事件是事件觸發後的事件處理過程，並且上面的事件觸發是被動的事件觸發，怎麼可以主動觸發事
從零開始學 Web 之 Ajax（四）介面文件，驗證使用者名稱唯一性案例
>大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... > > - github：https://github.com/Daotin/Web > - 微信公眾號：[Web前端之巔](https://github.com/Daotin/pi
從零開始學 Web 之 HTML5（四）拖拽介面，Web儲存，自定義播放器
>大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... > > - github：https://github.com/Daotin/Web > - 微信公眾號：[Web前端之巔](https://github.com/Daotin/pi