使用 CSS 創建多色邊框

已發表: 2022-02-16

CSS 邊框屬性確實有一些自定義選項，例如實心、虛線、點線等選項。但是，當涉及到邊框顏色時，我們只能每邊有一個純色。 但是，還有另一種方法可以使用您可能沒有想到的更多屬性來實現多色線，讓我們來看看。

堅硬的

固體硼

虛線

破折號

點綴

虛線

多色邊框

多色bor1

多色bor2

為了實現如上所示的多色邊框，我們將使用position屬性和帶有顏色漸變的::after選擇器。 首先，我們將使用 HTML <div> 類創建一個標題區域，然後我們將使用 CSS 對其進行樣式設置，以使用多色邊框將其與下面的內容分開。

創建您的 HTML：

 <div class="ost-multi-header"> <h1> Header Title </h1> </div>
在彈出窗口中打開
<div class="ost-multi-header"> <h1> Header Title </h1> </div>

現在，讓我們使用 CSS 對其進行一些樣式設置。

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }
在彈出窗口中打開
h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }

您現在應該有如下所示的內容：

使用 CSS 創建多色邊框

有了它，我們現在可以將::after添加到.ost-multi-header selector 。 但是，在我們開始之前，我想解釋一下::after的作用以及為什麼我們需要多色邊框的 position 屬性。 ::after使用所選元素末尾的 content 屬性中的任何內容創建一個偽元素。 在我們的例子中，該元素是.ost-multi-header 。 讓我們做一個歷史悠久的“Hello World！” 舉例來說明。

將此添加到您的 CSS 中：

 .ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; }
在彈出窗口中打開
.ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; }

hwheaderbor

如您所見，我們現在有一個“Hello World！” 標題下方的元素。 因為我們的父元素.ost-multi-header的 position 屬性是relative ，所以我們可以給子元素一個absolute位置。 這將使我們可以輕鬆地將使用::after創建的新偽元素移動到父元素中任何我們喜歡的位置。 我們把它放在底部，並在父元素內從左側移動 20 像素。 注意，如果父元素沒有將 position 屬性設置為 relative，那麼我們的絕對定位元素將位於瀏覽器視口的底部和左側 20px 處。

我們的彩色邊框呢？ 我們將使用漸變將偽元素的背景設置為多色邊框。 CSS 漸變可以是線性的或徑向的。 對於我們的邊框，我們將使用linear-gradient 。 很簡單，這將為我們提供我們所尋求的邊界。

 .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }
在彈出窗口中打開
.ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }

但是，讓我們慢慢來一步一步。 首先， content屬性仍然存在，即使它是空白的。 這是因為，如果沒有content屬性，就永遠不會創建偽元素； 所以，我們需要它。 我們需要設置偽元素的高度，即邊框高度。 為什麼要將left和right屬性都設置為 0？ 如果沒有設置寬度，這會將偽元素拉伸到父元素內的 100% 寬度。 它可能看起來很多，但linear-gradient設置只是告訴顏色從左“向右”流動，我們在特定百分比的背景中放入我們想要的顏色。

儘管我們所做的只是選擇特定百分比的顏色，但這需要大量的工作。 幸運的是，有免費的在線資源可以極大地幫助處理顏色漸變。 ColorZilla的Ultimate CSS Gradient Generator是一個很棒的工具，它包含多個用於支持舊瀏覽器的漸變屬性。

我們已經在工具上設置了漸變，因此我們可以使用此鏈接查看本教程中使用的確切設置：https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33 ,feb123+66,2184cd+66,2184cd+100。 它應該如下所示：

使用 CSS 創建多色邊框

這個網站上有很多設置，但讓我們專注於我們需要哪些設置來創建我們將用於我們的邊框的外觀。 讓我們分解一下：

使用 CSS 創建多色邊框

  1. 預設- 這些可能是一個很好的起點！
  2. 滑塊- 您可以在此處添加、刪除和編輯顏色
  3. 停止- 此部分允許您更改每種顏色的不透明度和位置的設置。 只需單擊上面滑塊上的顏色框即可更改您在此部分中控制的顏色框。
  4. 預覽- 在這裡您可以立即看到更改的結果。
  5. 方向和大小- 這允許您從水平、垂直、對角線或徑向進行更改。 並設置漸變的大小。
  6. CSS 代碼- 生成的帶有永久鏈接的代碼，因此您可以隨時返回並輕鬆編輯漸變。

在我們的例子中，我們不是在尋找漸變的漸變，而是在兩種顏色之間尋找一個純平的過渡，所以我們所要做的就是在我們希望發生這種情況的地方將兩種顏色堆疊在一起。 在我們的示例中，我們分別以 33% 和 66% 的比例堆疊顏色。

使用 CSS 創建多色邊框

隨意嘗試設置，知道您在預覽中看到的是代碼將生成的內容。 當您按照您想要的方式設置外觀時，您可以使用代碼框右下方的“複製”按鈕。

畢業拷貝

如果您複製了我在鏈接中的代碼，您的最終 CSS 將如下所示：

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }
在彈出窗口中打開
h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }

而且，該 CSS 將生成完全響應的多色下劃線：

使用 CSS 創建多色邊框

我們去吧！ 我們不必在.ost-multi-header的底部添加 6px 填充，但是absolute定位的子元素不再影響父元素的高度。 我們可以讓它漂浮在父元素中的內容之上，或者添加padding以確保它不會覆蓋我們可能不想被阻礙的任何內容。

這是在 CodePen 上重新創建的此練習的鏈接，供大家編輯和學習，無需擔心。

最後一點，一些較舊的瀏覽器僅支持單冒號:after選擇器，而不支持現代標準雙::after 。 如果您希望安全，可以使用單冒號。 它現在也可以在現代瀏覽器中使用。