2025 iThome 鐵人賽
分享至
元素的邊框除了基本的樣式和顏色，也可以使用「影像」作為邊框，這個單元會介紹 border-image、border-image-slice、border-image-repeat 等邊框影像的樣式屬性，運用豐富的影像素材，讓邊框更加特別，最後還會運用影像邊框，實作「波浪形狀」的邊框效果。
影片重點：
00:01:04 border-image-source 邊框的影像來源 00:04:09 border-image-slice 邊框的影像切片 00:10:21 border-image-repeat 邊框的影像重複 00:12:40 border-image-outset 邊框的影像擴展範圍 00:14:38 border-image-width 邊框的影像寬度 00:16:45 border-image 影像邊框 ( 縮寫格式 ) 00:18:11 波浪造型邊框效果
相關參考：
教學文：CSS border-image 影像邊框 影片連結：https://www.youtube.com/watch?v=iloE1_oGXC8
更多參考： Youtube 頻道：https://www.youtube.com/@steam.oxxostudio CSS 教學大全：https://steam.oxxostudio.tw/category/css/index.html
更多參考：
IT邦幫忙
iThome鐵人賽
看影片追技術