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 樣式,建立以下的效果:
沒有留言:
張貼留言