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 樣式,建立以下的效果:



沒有留言: