技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運營

贊助商

分類目錄

贊助商

最新文章

搜索

如何使用純CSS為div添加邊框圖像和漸變邊框

作者:admin    時間:2023-7-7 10:20:32    瀏覽:

使用css設(shè)置div邊框樣式你可能并不陌生,例如border-colorborder-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-sourceborder-image-slice全部的值。

回想一下前面的示例如何使用單獨的屬性:

.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-sourceborder-image-slice,如何使用純 CSS 添加邊框圖像和漸變邊框。如果你要獲取更多好看的案例,請參看下文:

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

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

相關(guān)文章

標(biāo)簽: css  border  div  邊框圖像  漸變邊框  
x
  • 站長推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */