【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 5 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

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



沒有留言: