從零開始學 Web 之 CSS3(四)邊框圖片,過渡

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

在這裏我會從 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);

缺點:

  1. 全部樣式的過渡效果同樣。
  2. 效率低下,它會去查詢全部添加的樣式。
  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; /*放在最後*/

四、案例:手風琴效果

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

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

相關文章
相關標籤/搜索