CSS3 border-image 樣式－利用圖片作框線

CSS3 除了支援框線的陰影、圓弧狀等相關效果設計，更允許你指定外部圖片作為框線的來源素材，例如以下的效果：

圖中方塊的左邊框以一張圖片為素材，描繪出特殊的邊框效果，透過CSS3 支援的 border-image 樣式，我們可輕易的作到這種效果。首先準備一張圖檔如下：

這張圖的上、右與下邊框是空白內容，而最左邊則是所要套用的框線圖樣，命名為 border.png。接下來於網頁中配置如下的內內容：

<div id="outer">

    <div id="inner">

        <div style="font-size: 72pt; color: #fff; padding: 100px;">

<span>四季</span>

</div>

    </div>

</div>

識別  id 設為  outer 的 <div> 套用圖片框樣式，而  id 為 inner 者，則用以顯示內容。接下來，設定邊框樣式如下：

<style>

    div#outer {

border-image: url("border.png") 47 40 47 62 repeat;

        -webkit-border-image: url("border.png") 47 40 47 62 repeat;

-moz-border-image: url("border.png") 47 40 47 62 repeat;

        border-width: 36px;

        width: 820px; height: 460px;

        background-color: gray; }

    div#inner { width: 820px; height: 460px; background-color: #800080; }

</style>

針對 outer 這個  <div> 標籤，設定 border-image 樣式，其中第一個參數為所要套用的圖片來源 url ，接下來的四個數值則指定圖片的四個角落進行裁切的長度，最後一個 repeat 參數表示若指裁切的圖片無法填滿框線，則重覆填滿。

當然，你可以再為邊框加上陰影，提供更豐富的外觀效果，修改其中內部  <div> 標籤的樣式如下：

div#inner {

    width: 820px; height: 460px; background-color: #800080;                   

    border:1px  solid silver ;box-shadow:6px 6px 10px purple  ;

}

其中的 box-shadow 樣式，建立以下的效果：

繼續閱讀…