CSS3 除了支援框線的陰影、圓弧狀等相關效果設計，更允許你指定外部圖片作為框線的來源素材，例如以下的效果：
圖中方塊的左邊框以一張圖片為素材，描繪出特殊的邊框效果，透過CSS3 支援的 border-image 樣式，我們可輕易的作到這種效果。首先準備一張圖檔如下：
這張圖的上、右與下邊框是空白內容，而最左邊則是所要套用的框線圖樣，命名為 border.png。接下來於網頁中配置如下的內內容：
識別 id 設為 outer 的 <div> 套用圖片框樣式，而 id 為 inner 者，則用以顯示內容。接下來，設定邊框樣式如下：
針對 outer 這個 <div> 標籤，設定 border-image 樣式，其中第一個參數為所要套用的圖片來源 url ，接下來的四個數值則指定圖片的四個角落進行裁切的長度，最後一個 repeat 參數表示若指裁切的圖片無法填滿框線，則重覆填滿。
當然，你可以再為邊框加上陰影，提供更豐富的外觀效果，修改其中內部 <div> 標籤的樣式如下：
其中的 box-shadow 樣式，建立以下的效果：
圖中方塊的左邊框以一張圖片為素材，描繪出特殊的邊框效果，透過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 樣式，建立以下的效果：
沒有留言:
張貼留言