在網頁上經常使用CSS border, 但最多也只是1px solid, 其他border style實在太old school… 前幾天在想, 有沒有方法可以做到平行四邊形的border? 像凶案現場或者地盤的膠帶也很有趣!google一下就發現了CSS3新增的border-image, 可以用圖像做border, 於是作了幾個sketch來測試一下.

首先要預備一張可以分成九份的圖.

border

然後在css做以下設定:

div {
width: 300px;
height: 200px;
border-width: 10px;
border-image: url(“border.png”) 27 round;
}

就可以做到以下的效果!

sample1

border-width設定為10px這個不用解釋, 之後那句border-image可以分成三個部份.

首先url(‘border.png’)就是設定用作border的圖像檔url, 第二個參數是設定圖像的分割位置, 可以使用pixel或者percentage, 例子裡的圖像是81px x 81px, 所以設定分割位置為27就是將圖像上下左右距離27px做切割, 像下圖:

border1_slice

然後browser就會將切割好的四角放到div的四角. 而第三個參數設定為round, browser就會將切割好的四邊部份用來填滿div的四邊.

下面是利用border-image製作的膠帶效果.

Hong Kong, New Territories, Hong Kong

Leave a comment

Your email address will not be published. Required fields are marked *