中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

9. 邊框圖片

border-image 屬性允許你在元素的邊框上設(shè)定圖片， 讓你從通常的solid, dotted 和其它邊框樣式中解放出來(lái)。該屬性給設(shè)計(jì)師一個(gè)更好的工具，用它可以方便的定義設(shè)計(jì)元素的邊框樣式，比background-image 屬性(對(duì)高級(jí)設(shè)計(jì)來(lái)說(shuō)) 或枯燥的默認(rèn)邊框樣式更好用。我們也可以明確的定義一個(gè)邊框可以被如何縮放或平鋪。

SpoonGraphics 博客為它的圖片邊框使用了border-image 屬性。

在SpoonGraphis blog中，border-image被用于圖片邊框，如下所示：

#content .post img {
    border: 6px solid #f2e6d1;
    -webkit-border-image: url(main-border.png) 6 repeat;
    -moz-border-image: url(main-border.png) 6 repeat;
    border-image: url(main-border.png) 6 repeat;
    }

要想定義border-image，我們必須指定圖片地址，圖片的那部分將被剪切并用于元素的每一個(gè)邊上，以及圖片是否被縮放或平鋪。

為了制作一個(gè)使用下面的圖片作為邊框的div ，我們應(yīng)該使用下面的代碼(我們將為這個(gè)例子添加Opera 和Konqueror 支持):

div {
    border-width: 18px 25px 25px 18px;
    -webkit-border-image: url(example.png) 18 25 25 18 stretch stretch;
    -moz-border-image: url(example.png) 18 25 25 18 stretch stretch;
    -o-border-image: url(example.png) 18 25 25 18 stretch stretch;
    -khtml-border-image: url(example.png) 18 25 25 18 stretch stretch;
    border-image: url(example.png) 18 25 25 18 stretch stretch;
 }

該屬性的最后一個(gè)值可以是stretch (默認(rèn)), round (只有一個(gè)平鋪了整數(shù)倍的圖片被填充在允許的地方) 或repeat。在我們的例子中，上下左右邊框圖片被拉伸。如果我們只想頂部和底部邊框被拉伸，我們可以使用下面的CSS:

div {
    (...)
    border-image: url(example.png) 18 25 25 18 stretch repeat;
 }

我們可以可以單獨(dú)的指定每一個(gè)角，如果我們想為每一個(gè)角使用不同的圖片：

div {
    border-top-image: url(example.png) 5 5 stretch;
    border-right-image: url(example.png) 5 5 stretch;
    border-bottom-image: url(example.png) 5 5 stretch;
    border-left-image: url(example.png) 5 5 stretch;
    border-top-left-image: url(example.png) 5 5 stretch;
    border-top-right-image: url(example.png) 5 5 stretch;
    border-bottom-left-image: url(example.png) 5 5 stretch;
    border-bottom-right-image: url(example.png) 5 5 stretch;
    }

如果瀏覽器不支持border-image 屬性，它將無(wú)視這些屬性，并只應(yīng)用定義的其它邊框?qū)傩�，比�?code>border-width 和border-color.

瀏覽器支持: border-image 目前只有Webkit核心瀏覽器支持。不太確定Firefox的下一個(gè)版本是否支持。

擴(kuò)展閱讀：

• The ‘border-image’ property: W3C Working Draft
• Border-image: using images for your border — CSS3.info
• border-image in Firefox
• border-image demonstration page
• Replicating iPhone Buttons the “webkit” way!

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁(yè) 用CSS3將你的設(shè)計(jì)帶入下個(gè)高度 [9] 下一頁(yè) 用CSS3將你的設(shè)計(jì)帶入下個(gè)高度 [11]

◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。