現代CSS：創建 CSS 雙邊框的 6 種實現方案

常開發中，單邊框的樣式實現已經家常便飯了，邊框屬性常用的有 border-color、border-style、border-width。border-color 和 border-width 指定了邊框的顏色和寬度，border-style 指定了邊框是實心、虛線、雙線還是其他樣式。今天和大家一起探討使用 CSS 創建雙邊框的幾種實現方案。

1.創建頁面框架

通過 html:5 和 (div.box.box-$>h2{box $})*6 快速創建頁面框架，通過 flex 布局讓容器排列美觀，并給每個容器設置不同的顏色。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box box-1">
      <h2>box 1</h2>
    </div>
    <div class="box box-2">
      <h2>box 2</h2>
    </div>
    <div class="box box-3">
      <h2>box 3</h2>
    </div>
    <div class="box box-4">
      <h2>box 4</h2>
    </div>
    <div class="box box-5">
      <h2>box 5</h2>
    </div>
    <div class="box box-6">
      <h2>box 6</h2>
    </div>
  </body>
</html>

2.增加基礎樣式

body {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 25px;
  padding: 15px;
}
.box {
  width: 300px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  &.box-1 {
    background-color: green;
  }
  &.box-2 {
    background-color: rebeccapurple;
  }
  &.box-3 {
    background-color: brown;
  }
  &.box-4 {
    background-color: yellow;
  }
  &.box-5 {
    background-color: violet;
  }
  &.box-6 {
    background-color: aqua;
  }
}

初始效果如下：

1.使用 border-style 屬性

我們使用 border-style 屬性在 .box-1 上創建雙邊框效果。border-style 的可取值有很多，使用 border-style: double 創建雙邊框是最常規的方法。

border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

我們給 .box-1 元素增加以下樣式：

.box-1 {
  border-width: 15px;
  border-color: red;
  border-style: double;
}

通過 border-style CSS 屬性，我們可以在方框的四邊設置元素的線條樣式。該屬性可分配多個關鍵字值。

要創建雙邊框，可使用 double 關鍵字值。這會自動在兩條邊框線之間創建填充。我們還可以使用 border-[top/right/bottom/left] 在元素的特定邊上創建雙邊框樣式。

2.使用 outline 屬性

我們使用 outline 屬性在 .box-2 上創建雙邊框效果。outline 和 border 類似，但 outline 不會占用任何空間，因為它們是在元素內容之外繪制的，此外，邊框則提供了更多的樣式選項。例如，每條邊框線都可以使用不同的顏色。

要使用 outline 屬性實現雙邊框效果，我們需要使用一個邊框和一個輪廓。不過，與 border-style 屬性不同，outline 屬性不會自動在自身和邊框之間創建空隙。要在輪廓和邊框之間添加空隙，我們需要使用 outline-offset 屬性。

我們在 .box-2 上使用 outline 屬性：

.box-2 {
  border: 5px solid #f00; 
  outline: 5px solid #00f;
  outline-offset: -10px;
}

如上代碼所示，outline-offset 屬性可用于向內調整輪廓（例如設置負值，如 -20px）或向外調整輪廓（例如設置正值，如 5px）。在這里，我們使用了負的輪廓偏移來向內調整藍色輪廓，使紅色邊框看起來像是外部的雙邊框

3.使用 ::before 或 ::after 偽元素

我們使用 ::before 偽元素在 .box-3 上創建雙邊框效果，使用 CSS 偽元素創建雙邊框也比較簡單，即通過定位將 ::before 偽元素添加輔助邊框：

.box-3 {
  position: relative;
  border: 5px solid #00f;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 5px solid green;
  }
}

使用 border 屬性在方框上方創建了一個藍色外部邊框。同時將綠色內部邊框設置為絕對定位，并使用頂部、左側、底部和右側值對其進行定位，流出間隙。

4.使用 box-shadow 屬性

我們使用 box-shadow 屬性在 .box-4 上創建雙邊框效果。通過使用兩個逗號分隔的陰影，將偏移和模糊設置為零，并賦予每個陰影適當的大小，就可以使盒狀陰影看起來像雙邊框：

.box-4 {
  width: 280px;
  height: 130px;
  margin: 10px;
  box-shadow:
    0 0 0 5px red,
    0 0 0 10px green;
}

在本例中，第二個（綠色）陰影是第一個（紅色）陰影的兩倍，但由于它們重疊在一起，所以看起來大小相同。還有個區別是 box-shadow 會變向改變容器的視覺尺寸，這里為了和其他盒子對齊，手動對盒子的寬高和外邊距進行了干預。

5.使用 background-clip 屬性

我們使用 background-clip 屬性在 .box-5 元素上創建雙邊框效果：

.box-5 {
  border: 5px solid red;
  padding: 5px;
  background-clip: content-box;
}

我們使用 CSS background-clip 屬性使方框元素的背景僅填充 content-box 區域。這樣就在內容框周圍產生了間距，看起來就像有了一個白色邊框。加上元素的常規邊框就有點像雙邊框了。

效果如下：

6.使用 linear-gradient() 函數

我們使用 linear-gradient() 函數在 .box-6 上創建一個雙邊框。該函數可用于沿直線在兩種或多種顏色之間產生漸變過渡。在本例中，我們首先給 .box-6 元素設置 5px 寬的綠色邊框。然后，在背景屬性中為每一側設置線性漸變：

.box-6 {
  border: 5px solid #f00;
  background: 
    linear-gradient(to top, #00f 5px, transparent 1px),
    linear-gradient(to bottom, #00f 5px, transparent 1px), 
    linear-gradient(to left, #00f 5px, transparent 1px), 
    linear-gradient(to right, #00f 5px, transparent 1px);
}

效果如下：

整體效果：

TML提交按鈕是一種HTML表單元素，允許用戶將表單數據提交到服務器。提交按鈕通常與表單元素（如文本框和下拉列表）一起使用，以便用戶可以輸入并提交信息。在HTML中，提交按鈕通常使用標簽來定義。

如何編寫HTML提交按鈕代碼？

要創建HTML提交按鈕，您需要使用標簽，并將type屬性設置為“submit”。例如，以下代碼會創建一個名為“submit”的提交按鈕：

```

在這個例子中，“action”屬性指定了表單數據提交到的URL，“method”屬性指定了提交表單的HTTP方法（通常是POST或GET）。按鈕的“value”屬性指定了按鈕上顯示的文本。

如何自定義HTML提交按鈕樣式？

默認情況下，HTML提交按鈕的樣式取決于用戶的操作系統和瀏覽器。但是，您可以使用CSS樣式表來自定義按鈕的外觀。例如，以下代碼將創建一個紅色的提交按鈕：

```

在這個例子中，我們使用了style屬性來設置按鈕的背景顏色和文本顏色。您還可以使用其他CSS屬性來自定義按鈕的大小、邊框等。

如何使用JavaScript處理HTML提交按鈕？

您可以使用JavaScript來添加交互性和驗證表單數據。例如，以下代碼將在用戶單擊提交按鈕時彈出一個提示框：

```

在這個例子中，我們使用了onsubmit屬性來指定當表單提交時要運行的JavaScript函數。此函數返回true或false，如果返回false，則表單將不會提交。在這個例子中，我們使用confirm()函數顯示一個提示框，并在用戶單擊“確定”時返回true。

總結

HTML提交按鈕是Web表單中的重要元素，允許用戶將表單數據提交到服務器。您可以使用標簽來創建提交按鈕，并使用CSS樣式表自定義外觀。您還可以使用JavaScript添加交互性和驗證表單數據。通過掌握HTML提交按鈕的知識，您可以創建復雜的Web表單，并收集和處理用戶數據。

網頁設計中經常用到css來設計各種邊框樣式以及顏色等，有時候需要一個div只顯示一個邊框，那么你可能會用到下面的一些方法。?

一、CSS border-width 屬性

border-width是實現顯示邊框的重要屬性。用法如下：

border-width:top right bottom left

參數說明：

top：上邊框屬性，可以設置像素，也可以設置樣式，意思為上邊框的寬度。

right：右邊框屬性，可以設置像素，也可以設置樣式，意思為上邊框的寬度。

bottom：下邊框屬性，可以設置像素，也可以設置樣式，意思為上邊框的寬度。

left：左邊框屬性，可以設置像素，也可以設置樣式，意思為上邊框的寬度。

其中像素如：10px 20px等

內置樣式有：

thin：定義細的邊框；

medium:默認值，定義中等邊框；

thick：定義粗的邊框；

inherit：繼承父元素的邊框寬度。

二、CSS border-style 屬性

border-style是用來設置邊框線樣式的，語法如下：

border-style:樣式;

其中可設置的樣式有：

none 定義無邊框。

hidden 與 "none" 相同。不過應用于表時除外，對于表，hidden 用于解決邊框沖突。

dotted 定義點狀邊框。在大多數瀏覽器中呈現為實線。

dashed 定義虛線。在大多數瀏覽器中呈現為實線。

solid 定義實線。

double 定義雙線。雙線的寬度等于 border-width 的值。

groove 定義 3D 凹槽邊框。其效果取決于 border-color 的值。

ridge 定義 3D 壟狀邊框。其效果取決于 border-color 的值。

inset 定義 3D inset 邊框。其效果取決于 border-color 的值。

outset 定義 3D outset 邊框。其效果取決于 border-color 的值。

inherit 規定應該從父元素繼承邊框樣式。

三、實例應用

只要定義邊框不為0，即可顯示邊框（但是需要定義邊框線樣式），如果想要只顯示下邊框就相當于把top、right、left設置為0px；下邊框不為0即可。

實例如下：

<html>

<head>

</head>

<body>

<style>

.show{ border-width: 0 0 1px 0; border-style: solid; border-color: black; }

</style>

<div class='show'>只顯示下邊框</div>

</body>

</html>

顯示如下：

如果想要只顯示右邊框只需要改border-width屬性為 0 1px 0 0即可。

在線咨詢

上一篇：怎么把一篇文章制作成一個二維碼？
下一篇：一看就懂的Excel表格的基本操作的十大技巧

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商