詳解css3之border-image

時間 2019-11-16

標籤詳解 css3 css border image 欄目 CSS 简体版

原文原文鏈接

border-image簡介

css3中新增了一個屬性border-image，這個屬性容許開發者使用圖片來定義邊框,擴充了 CSS2 中僅有的幾個預約義邊框樣式(border-style)。
border-image 是一個簡寫屬性，分別設定了如下幾個屬性。css

border-image-sourcehtml
border-image-slicecss3
border-image-widthweb
border-image-outset框架
border-image-repeat學習

爲何圖片能夠做爲邊框？

在開始學習border-image以前我有一個疑問，圖片是怎麼應用到容器的邊框上的？url

看下圖
spa

簡單的說就是把圖片的中間部分去掉，從而造成一個相似邊框的框架。code

那麼如何使用被劃分出來的八格素材來生成一個邊框呢？htm

左上、右上、左下、右下的四格素材分別做爲邊框的四個角，而上下左右的四格素材分別通過不一樣形式的擴展，造成邊框的四條邊。上圖很好的說明了圖片造成邊框的處理形式。

border-image-source

border-image-source屬性用來指定邊框所需素材的路徑，語法能夠參照backgound-image。
須要注意的是，若是隻設置了border-image-source屬性而其餘屬性使用缺省值，則邊框素材不會被劃分九宮格，而是將整個素材按照邊框寬度縮放至合適尺寸後安放在邊框四角。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>邊框圖片</title>
<style>
#border_image {
    width:100px;
    height:100px;
    border:15px solid #ccc;
    border-image:url("http://img.mukewang.com/52e21fea000127e802100210.jpg");
    background:#ccc;
    }
</style>
</head>
<body>
<div id="border_image"></div>
</body>
</html>

以下圖

border-image-slice

border-image-slice屬性用來設置邊框素材的切割尺寸，以下圖，依次是上橫切割線，右豎切割線，下橫切割線，左豎切割線。數值分別表明從上、右、下、左邊緣向素材中心延伸的像素/百分比數
注意：切割的數值只接受像素和百分比兩個單位，而且像素單位必須省略，即只接收數值或者百分比的形式。例如，border-image-slice: 10 10 30 10表明圖片素材按照下圖的樣式被切割：

border-image-width

border-image-width用來設置邊框素材的寬度,當同時設置了border-image-width和border-width屬性時，那麼邊框的實際寬度由border-width屬性決定。此時，若是border-image-width屬性小於border-width屬性，邊框圖片會沿邊框的外側分佈而內側留空造成 padding 的效果；若是border-image-width屬性大於border-width屬性，邊框圖片會仍會沿邊框的外側分佈而內測溢出，以下圖