卡卡網(wǎng)

使用css設(shè)置div邊框樣式你可能并不陌生，例如border-color和border-width等，你是否想過設(shè)置div邊框更加豐富的樣式？例如使用邊框圖像，漸變邊框等等。是的，現(xiàn)在的CSS技術(shù)已經(jīng)可以設(shè)置div邊框圖像、漸變邊框等炫酷好看的樣式了，這將是本文要介紹的內(nèi)容。

設(shè)置示例

首先，css建立一個.box類。

.box {
  width: 400px;
  height: 200px;
  max-width: 100%;
  margin: 1rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

接下來，在div元素中使用此類：

<div class="box">
  無邊框的示例框。
</div>

現(xiàn)在，你可以創(chuàng)建一個新類.with-border：

.with-border {
  border-color: black;
  border-style: solid;
  border-width: 30px;
}

然后，將其添加到標(biāo)記中：

<div class="box with-border">
  帶邊框的示例框。
</div>

此代碼將呈現(xiàn)以下樣式的內(nèi)容：

使用邊框圖像

首先，創(chuàng)建一個新類.with-border-image：

.with-border-image {
  border-style: solid;
  border-width: 20px;
  border-image-source: url(image.jpg);
  border-image-slice: 60 30;
}

你會注意到，仍然需要將常規(guī)邊框應(yīng)用于元素，因為邊框圖像取代了常規(guī)邊框樣式。

border-image-source指定源圖像，可以是柵格或基于矢量的圖像 (SVG) 的 URL 或數(shù)據(jù) URI。

border-image-slice是指將圖像分為九個區(qū)域的切片過程。通過定義最多四個值，你可以指定圖像的哪一部分將作為邊框的一部分重復(fù)。

然后，將其添加到標(biāo)記中：

<div class="box with-border-image">
  帶邊框圖像的示例框。
</div>

此代碼將呈現(xiàn)以下樣式的內(nèi)容：

使用簡寫屬性

有一個簡寫屬性border-image可以同時指定border-image-source和border-image-slice全部的值。

回想一下前面的示例如何使用單獨(dú)的屬性：

.with-border-image {
  border-style: solid;
  border-width: 20px;
  border-image-source: url(image.jpg);
  border-image-slice: 60 30;
}

這是用簡寫屬性重寫的同一示例：

.with-border-image {
  border-style: solid;
  border-width: 20px;
  border-image: url(image.jpg) 60 30;
}

使用漸變邊框

支持三種類型的漸變：線性、徑向和圓錐形。對于漸變，你需要指定border-image-slice的值1。

使用線性漸變

這是一個線性漸變： 

.with-linear-gradient {
  border-style: solid;
  border-width: 10px;
  border-image: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66)) 1;
}

將其添加到你的標(biāo)記中。此代碼將呈現(xiàn)以下內(nèi)容：

使用徑向漸變

這是徑向漸變的示例：

.with-radial-gradient {
  border-style: solid;
  border-width: 10px;
  border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;
}

將其添加到你的標(biāo)記中。此代碼將呈現(xiàn)以下內(nèi)容： 

使用圓錐漸變

這是圓錐曲線梯度的示例：

.with-conic-gradient {
  border-style: solid;
  border-width: 10px;
  border-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red) 1;
}

將其添加到你的標(biāo)記中。此代碼將呈現(xiàn)以下內(nèi)容：

總結(jié)

在本文中，介紹了border-image-source和border-image-slice，如何使用純 CSS 添加邊框圖像和漸變邊框。如果你要獲取更多好看的案例，請參看下文：

• 5款CSS設(shè)置漂亮好看的div邊框圖（border-image）樣式

目前大部分主流瀏覽器均支持border-image屬性。采用新功能時，請考慮目標(biāo)受眾的瀏覽器使用情況。

遺憾的是，border-image不能設(shè)置border-radius圓角屬性。

相關(guān)文章

• CSS如何讓DIV背景圖片隨窗口大小自動縮放【示例】
• [2示例]如何使用CSS將div中的圖像居中對齊（垂直和水平）
• [2示例]使用 CSS 使 div 可水平滾動
• 【8實(shí)例】詳解css z-index的值使用區(qū)別:-1,0,1,auto,999
• 使用偽元素在p或div左邊(border)上加一個感嘆號警告提示符
• 【JQuery插件】把網(wǎng)頁或某div或table表格內(nèi)容轉(zhuǎn)為圖片并下載
• 6種方法改變div的id值（使用JQuery或JS）
• 用JQuery或JS改變div的id的五種方法
• div層顯示/隱藏的6種常見效果

標(biāo)簽: css  border  div  邊框圖像  漸變邊框