【CSS3學習筆記】16：邊框圖片效果

阿新 • • 發佈：2019-01-21

通過邊框背景這個新特性可以讓我們的邊框更加豐富。
相關屬性
①border-image-source 引入圖片背景地址
②border-image-slice 切割背景圖片
(通過設定四個值來知道四個角要顯示的尺寸，在這裡加入fill可以將內部填充)
③border-image-width 邊框圖片的寬度
(通過設定四個值來知道邊框四條邊的寬度。)
④border-image-repeat 邊框中邊的方案
(stretch拉伸(預設)，repeat平鋪(超過則截斷)，round平鋪(動態調整圖片大小)，space平鋪(動態調整圖片間距)。)
⑤border-image-outset 邊框背景向外擴張的範圍
(為了剛好包含住background的範圍，它個值往往就是邊框每條邊的寬度。)
⑥border-image 前面五個屬性的簡寫

邊框應使用特製的圖片，能夠分成九宮格(不一定每格大小都一樣)，如用ps製作了一張這樣的圖：
這裡寫圖片描述
它的總大小是210px，每個格子為70px：

*測試程式碼

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>CSS3邊框圖片效果</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body 
>
    <div id="id1">
        <span>加入圖片邊框</span>
    </div>
    <br>
    <div id="id2">
        <span>用百分比切割</span>
    </div>
    <br>
    <div id="id3">
        <span>向外擴張以包含住背景</span>
    </div>
    <br><br> 
<br><br><br><br><br>
    <div id="id4">
        <span>設定四個邊的方案</span>
    </div>
    <br>
    <div id="id5">
        <span>嘗試fill填充</span>
    </div>
</html>

@charset "utf-8";

div span{
    vertical-align: -200px;
}

#id1{
    text-align: center;
    width: 400px;
    height :400px;
    /*邊框的地址*/
    border-image-source: url(lzh.png);
    /*邊框影象寬度，四個邊都是70px*/
    border-image-width: 70px;
    /*邊框的切割，四邊都向內切割70(px)，即每個角顯示70x70的小格，其它部分自動拉伸*/
    border-image-slice: 70;
}

#id2{
    text-align: center;
    width: 400px;
    height :400px;
    border-image-source: url(lzh.png);
    border-image-width: 70px;
    border-image-slice: 33.4%;
}

#id3{
    text-align: center;
    margin: 0 auto;
    width: 400px;
    height :400px;
    background-color: gray;
    border-image-source: url(lzh.png);
    border-image-width: 70px;
    border-image-slice: 33.4%;
    /*為了遮住背景顏色,向外擴張*/
    border-image-outset: 70px;
}

#id4{
    text-align: center;
    width: 400px;
    height :400px;
    border-image-source: url(lzh.png);
    border-image-width: 70px;
    border-image-slice: 33.4%;
    /*動態調整邊圖的大小以平鋪*/
    border-image-repeat: round;
}

#id5{
    text-align: center;
    width: 400px;
    height :400px;
    border-image-source: url(lzh.png);
    border-image-width: 70px;
    /*既平鋪，又填充*/
    border-image-slice: 33.4% fill;
    border-image-repeat: round;
}

執行結果：
這裡寫圖片描述

另外，利用邊框圖片(border-image)，還可以做出按鈕的效果來。

【CSS3學習筆記】16：邊框圖片效果

【CSS3學習筆記】16：邊框圖片效果

【python學習筆記】16：numpy陣列四則運算

【CSS3學習筆記】13：瀏覽器相容性字首,新單位rem

【JAVAWEB學習筆記】16

【JAVAEE學習筆記】hibernate02：實體規則、對象狀態、緩存、事務、批量查詢和實現客戶列表顯示

【JAVAEE學習筆記】hibernate03：多表操作，級聯練習:添加聯系人

【JAVAEE學習筆記】hibernate04：查詢種類、HQL、Criteria、查詢優化和練習為客戶列表增加查詢條件

【K8S學習筆記】Part3：同一Pod中多個容器間使用共享卷進行通信

【python學習筆記】37：認識Scrapy爬蟲,爬取滬深A股資訊

【python學習筆記】36：抓取去哪兒網的旅遊產品資料

【python學習筆記】35：爬蟲基礎和相關產品API(和風天氣)使用例項

【python學習筆記】41：認識Pandas中的資料變形

【python學習筆記】40：Pandas中DataFrame的分組/分割/合併

【python學習筆記】39：認識SQLAlchemy,簡單操作Pandas中的DataFrame

【python學習筆記】38：使用Selenium抓取去哪兒網動態頁面

【python學習筆記】45：認識Matplotlib和pyecharts資料視覺化

【python學習筆記】44：Series.apply()列資料批量處理,Series.str.extract()正則匹配

【python學習筆記】43：Pandas時序資料處理

【python學習筆記】42：Pandas資料缺失值/異常值/重複值處理

【python學習筆記】46：隨機漫步,埃拉托色尼篩法,蒙特卡洛演算法,多項式迴歸

【CSS3學習筆記】16：邊框圖片效果

相關推薦