CSS border-image

admin發表於2019-11-16
CSS

CSS2設定邊框的樣式較為簡單，比如設定邊框的粗細程度，邊框顏色和邊框型別（實線或者點狀等）。

想要實現精美多變的邊框效果，是一件非常燒腦的工作，甚至說難以實現。

令人鼓舞的是，border-image屬性的出現可以幫助前端人員設定邊框的樣式更為豐富多樣。

一.基礎知識：

使用border-style屬性可以設定邊框的型別，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:200px;
  height: 100px;
  border-style: dotted;
  border-color: red;
  border-width: 1px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

上面程式碼設定div的邊框型別為dotted，border-style屬性值極為有限，難以設定更為絢麗的邊框效果。

border-image可以規定圖片作為邊框樣式，由於圖片是比較容易做的美觀絢麗，於是實現邊框美觀絢麗成為較為容易的工作；可以認為border-image是border-style變數型別的一種。

特別說明：border-image屬性值為none或者圖片不可見時，顯示border-style屬性規定的邊框效果。

二.詳細說明：

語法結構：

[CSS] 純文字檢視 複製程式碼
border-image: source slice / width / outset repeat

border-image是複合屬性，拆分如下：

[CSS] 純文字檢視 複製程式碼
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

引數解析：

1.border-image-source：

用於規定是否用圖片定義邊框樣式或者規定影像來源路徑。

語法結構:

[CSS] 純文字檢視 複製程式碼
border-image-source : none | <url>

屬性值預設為none，不使用圖片定義邊框。

用圖片定義邊框，與background-image屬性相仿，用url()規定圖片路徑，相對/絕對路徑都合法。

2.border-image-slice：

用於規定圖片的切割位置。

語法結構:

[CSS] 純文字檢視 複製程式碼
border-image-slice: [ <number> | <percentage>]{1,4}&& fill?

預設值是100%。

number：純數值，不能夠帶單位，預設單位是畫素(px)。

percentage：相對於圖片的尺寸。

number和percentage都可以有1-4個值，取值方式與border-width相仿，遵循上右下左順序。

下面介紹一下它是如何具體切割圖片，先看一個圖片：

a:3:{s:3:\"pic\";s:43:\"portal/201807/21/004320gmt00z6uxjah6gh2.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

每一個小方塊尺寸是27px，那麼整個圖片的尺寸是81(27*3)畫素。

slice翻譯成中文是切割、劃分的意思，裁切方式是向內進行切割，如果有如下程式碼：

[CSS] 純文字檢視 複製程式碼
border-image-slice:27px 27px 27px 27px

第一個27px是從圖片上邊緣向內27px進行切割。

第二個27px是從圖片右邊緣向內27px進行切割。

第三個27px是從圖片下邊緣向內27px進行切割。

第四個27px是從圖片左邊緣向內27px進行切割。

切割演示圖片如下：

a:3:{s:3:\"pic\";s:43:\"portal/201807/21/004709m6zqktz77k8t8x9k.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面以動態方式演示了是如何對圖片進行切割。

圖片被切割後，劃分為九個區域，與元素的九個區域一一對應。

介紹一下元素九個區域，CSS程式碼如下：

[CSS] 純文字檢視 複製程式碼
div{
  margin:0px auto;
  height:100px;
  width:100px;
  border-style:solid;
  border-width:20px;
  border-color:blue red;
}

上述生成帶有邊框的div元素，具有潛在的九個區域，圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201807/21/005015bwbxxxcm1xzwhjmd.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

邊框圖片九個區域與元素九個區域一一對應，也就是邊框圖片的相應部位就應用於元素的相應位置。

fill關鍵字如果存在的話，將會保留border-image中間的部分（預設是丟棄中間部分，留空處理）。

3.border-image-width：

用於規定邊框圖片寬度。

語法結構：

[CSS] 純文字檢視 複製程式碼
border-image-width : [ <length> | <percentage> | <number> | auto ]{1,4}

邊框圖片繪製在指定的區域內的，這個區域叫做邊框圖片區域，border-image-width用來規定此區域的"厚度"。

此屬性可以省略，此時邊框圖片區域與元素的border是一致的。

此屬性可以有1-4個值，取值方式和border-width相仿，遵循上右下左方式。

4.border-image-outset:

用於規定邊框圖片區域超出元素邊框的尺寸。

語法結構：

[CSS] 純文字檢視 複製程式碼
border-image-outset : [ <length> | <number> ]{1,4}

此屬性可以有1-4值，取值方式和border-width類似，同時也遵循上右下左方式。

5.border-image-repeat：

用於規定切割後的邊框圖片中間部分（演示圖片中的黃色部分）在元素對應部分的存在方式。

語法結構：

[CSS] 純文字檢視 複製程式碼
border-image-repeat: [ stretch | repeat | round ]{1,2}

首先解釋一下三種方式的含義:

stretch：圖片以延展方式來填充該區域。

repeat：圖片以重複平鋪方式來填充該區域。

round：圖片以重複平鋪方式來填充該區域。如果沒有以整數的倍數來填充該區域，圖片會進行縮放以便於整數性倍數的平鋪填充。

此屬性可以有1-2個屬性值：

如果有一個，則用於上下左右四個方位。

如果有兩個，第一個用於上下方位，第二個用於左右方位。

如果省略此屬性，則預設使用stretch。

三.程式碼例項：

特別說明：以下程式碼例項都是以下面圖片作為邊框圖片，尺寸是（27*3）px。

a:3:{s:3:\"pic\";s:43:\"portal/201807/21/005522oz72ztueasyy2yt8.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  height:100px;
  width:200px;
  border:27px solid red;
  border-image:url("mytest/demo/bimg.jpg") 27;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

以上程式碼中，border-image-slice設定為27，由於沒有規定border-image-width，那麼將以邊框的尺寸為標準，又由於沒有規定border-image-repeat屬性，則預設採用stretch方式，也就是拉伸被切割的中間區域(也即是演示圖中的黃色區域)。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  height:100px;
  width:200px;
  border:54px solid red;
  border-image:url("mytest/demo/bimg.jpg") 27;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

此例項和例項一的唯一不同之處在於邊框的寬度，邊框圖片會自適應邊框的寬度尺寸。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  height:100px;
  width:200px;
  border:27px solid red;
  border-image:url("mytest/demo/bimg.jpg") 27 stretch repeat;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

在以上程式碼中，水平方位用stretch拉伸方式，垂直方位用repeat重複平鋪方式，repeat方式不會調整切割後邊框圖片中間部分(演示圖黃色部分)尺寸方式實現重複平鋪效果，所以會出現殘缺現象。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  height:100px;
  width:100px;
  border:27px solid red;
  border-image:url("mytest/demo/bimg.jpg") 27 repeat round;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

round方式可以自動調整切割後邊框圖片中間部分(演示圖黃色部分)尺寸方式實現重複平鋪效果，所以不會出現殘缺現象。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  height:100px;
  width:100px;
  border-style:solid;
  border-color:red;
  border-width:27px 54px;
  border-image:url("mytest/demo/bimg.jpg") 27;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

以上程式碼修改了邊框的尺寸，可以看出邊框圖片會跟著邊框尺寸進行自適應。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  height:100px;
  width:100px;
  border-style:solid;
  border-color:red;
  border-width:27px 54px;
  border-image:url("bimg.jpg") 27/27px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

當規定了border-image-width屬性之後，邊框圖片就不會再適應邊框寬度了。

相關文章