<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                企業??AI智能體構建引擎,智能編排和調試,一鍵部署,支持知識庫和私有化部署方案 廣告
                # 第 23 章 CSS3 邊框圖片效果 學習要點: 1.屬性初探 2.屬性解釋 3.簡寫和版本 主講教師:李炎恢 本章主要探討 HTML5?中 CSS3?中邊框圖片背景的效果,通過這個新屬性讓邊框更加的豐富多彩。 **一.屬性解釋** CSS3 提供了一個新的屬性集合,用這幾個屬性可以嵌入圖片形式的邊框。這樣,邊框就可以自定義了。 1.border-image-source ? ? ?//引入背景圖片地址 2.border-image-slice ? ? ? ? //切割引入背景圖片 3.border-image-width ? ? ? //邊框圖片的寬度 4.border-image-repeat ? ? //邊框背景圖片的排列方式 5.border-image-outset ? ? //邊框背景向外擴張 6.border-image ? ? ? ? ? ? ? //上面五個屬性的簡寫方式 **二.屬性解釋**? 要實現邊框背景,我們對圖片也有一定的要求,否則效果不能完全體現出來。圖片可以通過九宮格的切分來了解它。我們使用 W3C?官網上教學的圖片來講解一下。 ![](https://box.kancloud.cn/2016-05-16_5739d6c1d7d81.png) 如上圖所示,九宮格并不一定要求每一個格子大小都相同。當然,如果相同的話,制作邊框背景就相對容易一點。比如如下這張圖片: ![](https://box.kancloud.cn/2016-05-16_5739d6c20eb7d.png) 首先,用 Photoshop?軟件分析一下這個標準九宮格的總體大小和每個格子的大小。最終得出圖片總大小為 81px?正方形,四個角的大小為 27px?的正方形,其余五個角也是 27px。 那么,第一步:先創建一個盒子區域,大小為 400x400?的矩形。然后設置引入邊框圖像。 //引入邊框圖像 ``` border-image-source: url(border.png); ``` 單單只有這句話,webkit?引擎下的瀏覽器會在盒子區塊的四個角看到一丁點圖像的影子。而其他瀏覽器什么都看不到。這是由于沒有設置邊框背景圖像的寬度導致的。 //設置邊框圖像寬度,上右下左,可以設置四個值 ``` border-image-width: 81px; ``` 這里設置的是邊框圖像的寬度,而不是邊框寬度。當你設置邊框寬度,你會發現,文本會偏移。而邊框圖像的寬度不會擠壓文本。 //設置邊框的寬度 ``` border-width: 20px; ``` 以上設置完畢后,支持邊框背景圖片的瀏覽器會在四個角落鋪上這張圖片的完整形式。這個時候需要通過引入切割屬性來配置背景圖片的顯示方式。 //首先,邊框圖像寬度設置為?27px 和一個單格寬高一致? ``` border-image-width: 27px; ``` //設置切割屬性的大小? ``` border-image-slice: 27; ``` 這里的 27?不需要設置 px?像素,因為它默認就是像素。設置 27?之后,我們會發現邊框的四個角正好是橘紅色的四個角。那么你可以逐步放大或逐步放下這個值,來體驗一下它的變化。 //從?27 逐步放大到?81,四個角都慢慢縮小,各自顯示一個完整的圖像 ``` border-image-slice: 81; ``` //從?27 逐步縮小到?0,發現四個角都慢慢變大,配合?fill 整體顯示一個完整圖像 ``` border-image-slice: 0 fill; ``` 上面只是單獨設置了一個像素表示四個邊切割的大小,你也可以設置百分比、浮點值或者分別設置四個變的大小。 //33.5%差不多?27 ``` border-image-slice: 33.5%; ``` //上下設置?27,左右設置?0 ``` border-image-slice: 27 0; ``` 如果想讓邊框背景向外擴張,那么可以進行擴張設置。 //向外擴張?20px,也可以是浮點值,比如?2.2 ``` border-image-outset: 20px; ``` 四個角設定好之后,我們要設定四個變的顯示排列方式。使用 border-image-repeat?屬性,有四個值提供使用,分別如下表: | **屬性** | **說明** | | --- | --- | | stretch? | 指定用拉伸方式填充邊框背景圖。默認值。 | | repeat | 指定用平鋪方式來填充邊框背景圖。當圖片碰到邊界時,如果超過則被截斷。 | | round | 指定用平鋪方式來填充邊框背景圖。圖片會根據邊框的尺寸動態調整圖片的大小,直至正好可以鋪滿整個邊框。 | | space | 指定用平鋪方式來填充邊框背景圖。圖片會根據邊框的尺寸動態調整圖片的之間的間距,直至正好可以鋪滿整個邊框。 | //拉伸方式填充,當然,通過上右下左設置四個邊均可 ``` border-image-repeat: stretch; ``` //平鋪填充,超過則被截斷 ``` border-image-repeat: repeat; ``` //平鋪填充,動態調整圖片大小直至鋪滿 ``` border-image-repeat: round; ``` //平鋪填充,動態調整圖片的間距直至鋪滿? ``` border-image-repeat: space; ``` //另一個按鈕的小例子? ``` div { width: 400px; height: 40px; border-image-source: url(button.png); border-image-width: 10px; border-image-slice: 10 fill; border-image-repeat: stretch; } ``` **三.簡寫和版本** //border-image 簡寫格式很簡單,具體如下: ``` border-image:<' border-image-source '> || <' border-image-slice '> [ /<' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat '>? ``` //以上是手冊上摘錄的,轉換成實際格式如下:? ``` border-image: url(border.png) 27/27px round;? ``` 對于支持的瀏覽器及版本如下表: | | Opera | Firefox | Chrome | Safari | IE | | --- | --- | | 部分支持需帶前綴 | 11.5~12.1 | 3.5 ~ 14 | 4 ~ 14 | 3.1 ~ 5.1 | 無 | | 支持需帶前綴 | 無 | 無 | 無 | 無 | 無 | | 支持不帶前綴 | 15+ | 15+ | 15+ | 6+ | 11.0+ | //兼容加上前綴 ``` -webkit-border-image: url(border.png) 27/27px round; -moz-border-image: url(border.png) 27/27px round; -o-border-image: url(border.png) 27/27px round; border-image: url(border.png) 27/27px round; ```
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看