從零開始學 Web 之 CSS3（四）邊框圖片，過渡

時間 2019-11-17

標籤開始 web css3 css 邊框圖片過渡欄目 HTML 简体版

原文原文鏈接

你們好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新......css

github：https://github.com/Daotin/Web

微信公衆號：Web前端之巔

博客園：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！html

1、邊框圖片

邊框圖片：就是給邊框加圖片背景。前端

咱們以前加的邊框都是純顏色的邊框，那麼咱們怎麼給邊框加圖片呢？git

原理：把一張圖片分紅九宮格的形式，而後一一對應到須要添加邊框的元素上。github

而且，添加邊框圖片是以背景的方式添加的，因此會有可能文字覆蓋在邊框的狀況，後面也會介紹處理方法。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>

2、過渡

經過過渡 transition,咱們能夠在不使用 Flash 動畫或 JavaScript 的狀況下，當元素從一種樣式變換爲另外一種樣式時爲元素添加效果。學習

要實現這一點，必須規定兩項內容：

1.規定但願把效果添加到哪一個 CSS 屬性上；
2.規定效果的時長。

一、基本語法

/*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;

注意：添加過渡效果:過渡效果執行完畢以後，默認會還原到原始狀態。

二、連寫樣式

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);

缺點：

全部樣式的過渡效果同樣。

效率低下，它會去查詢全部添加的樣式。

建議不要這麼寫。

三、使用建議

由於 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; /*放在最後*/

四、案例：手風琴效果

效果：鼠標放在每一個標籤上，會慢慢下拉出詳細內容。

<!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>