整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
常開發中，單邊框的樣式實現已經家常便飯了，邊框屬性常用的有 border-color、border-style、border-width。border-color 和 border-width 指定了邊框的顏色和寬度，border-style 指定了邊框是實心、虛線、雙線還是其他樣式。今天和大家一起探討使用 CSS 創建雙邊框的幾種實現方案。
通過 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>
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;
}
}
初始效果如下：
我們使用 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] 在元素的特定邊上創建雙邊框樣式。
我們使用 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）。在這里，我們使用了負的輪廓偏移來向內調整藍色輪廓，使紅色邊框看起來像是外部的雙邊框
我們使用 ::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 屬性在方框上方創建了一個藍色外部邊框。同時將綠色內部邊框設置為絕對定位，并使用頂部、左側、底部和右側值對其進行定位，流出間隙。
我們使用 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 會變向改變容器的視覺尺寸，這里為了和其他盒子對齊，手動對盒子的寬高和外邊距進行了干預。
我們使用 background-clip 屬性在 .box-5 元素上創建雙邊框效果：
.box-5 {
border: 5px solid red;
padding: 5px;
background-clip: content-box;
}
我們使用 CSS background-clip 屬性使方框元素的背景僅填充 content-box 區域。這樣就在內容框周圍產生了間距，看起來就像有了一個白色邊框。加上元素的常規邊框就有點像雙邊框了。
效果如下：
我們使用 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);
}
效果如下：
整體效果：
一、基本線條：
1、<HR>
2、align線條位置（可選left、right、center）；width線條長度；color顏色；size厚度
<HRalign=center width=300 color=#987cb9SIZE=1>二、特效（效果并不是孤立的，可相互組合）
1、兩頭漸變透明：
<HR style="FILTER:alpha(opacity=100,finishopacity=0,style=2)" width="80%"color=#987cb9 SIZE=10>2、紡錘形：
<HR style="FILTER:alpha(opacity=100,finishopacity=0,style=1)" width="80%"color=#987cb9 SIZE=3>3、右邊漸變透明：
<HR style="FILTER:alpha(opacity=0,finishopacity=100,style=1)" width="80%"color=#987cb9 SIZE=3>4、左邊漸變透明：
<HR style="border:1 dashed #987cb9" width="80%"color=#987cb9 SIZE=1>5、虛線：
<HR style="border:3 double #987cb9" width="80%"color=#987cb9 SIZE=3>6、雙線：
<HR style="FILTER:progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)"width="80%" color=#987cb9 SIZE=1>7、立體效果：
<HR style="FILTER:progid:DXImageTransform.Microsoft.Glow(color=#987cb9,strength=10)"width="80%" color=#987cb9 SIZE=1>8、鋼針效果：
<table border="1px" cellpadding="0" cellspacing="0"style="height:265px;border-left-style:solid;border-bottom-style:none;border-right-style:none;border-top-style:none">９．垂直分割線
<table border="1px" cellpadding="0" cellspacing="0"style="height:265px;border-left-style:solid;border-bottom-style:none;border-right-style:none;border-top-style:none">
HTML代碼：
<hr style="border: 1px dotted #FF0000; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px">[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]
Word 里大家會怎么畫直線或底線呢？千萬不要再用一堆「-」號組成，也不要用空白鍵+ 底線的方式了。其實 Word 有內建非常方便的畫線方式，只要幾個步驟，無論是單橫線、雙橫線、虛線、波浪線、分隔線等等都沒有問題。
不過，Word 這種畫線的方式有個不易刪除的缺點，小編教大家如何刪除，以及不小心畫出直線后該如何避免再次啟用這工能。
Word 畫線方法：底線、虛線都可以這樣畫
在微軟office Word 里面畫線的方法意外地簡單，大家現在可以打開Word 試試看（Windows/Mac 版皆可），在空白處打三個「=」并按下Enter 輸入鍵，就會自動生成雙底線了。
單行橫線或底線也是一樣的方法，打三個「-」并按下Enter 確認鍵，就會生成一條的底線。
所有Word 的橫線指令如下：
雙橫線
橫線（底線）
波浪線
虛線
分隔線
畫出來的效果如下：
至于使用的方法也很容易理解，像是「=」這符號本身就是雙橫線、「-」就是一條橫線、「~」就是波浪線，這些都很直覺；至于「*」打出來其實也很像虛線，要記的只有「三個#」這指令。
如何刪除Word 生成的直線？
如果大家有嘗試了上面這種輸入底線的方式，會發現居然沒辦法直接用 Delete 或刪除鍵把它刪除。如果經常不小心畫出這種橫線，要怎么把它刪掉呢？或是關閉自動生成畫線的快捷鍵，避免以后不小心誤用。
首先，在剛打出直線之后，可以看到旁邊有一個閃電符號；這個閃電符號過一陣子或是進行其他指令后就會消失，所以如果要取消橫線，可以先趁閃電符號還在的時候按下去：
這時就可以點「復原框線線條」，就可以把剛剛產生的橫線刪除了。（這一系列橫線的官方名稱就叫做「框線線條」）；如果要關掉「三個– 加enter」之類的快速鍵，也可以點下方的「停止自動建立框線」：
刪除過后的橫線，就會變成原本輸入的「三個等于」或「三個減號」，不會再產生橫線了。
如果沒有閃掉符號了怎么刪除線條？
如果已經沒了閃電符號，要怎么把剛剛產生的底線刪除呢？首先，先讓鼠標位于「橫線上一段的最前面」：
然后在頂部的工具列，或是「編輯」>「清除」>「清除格式」，點下去之后，剛剛產生的橫線就會消失了。
用這個方法畫橫線、底線、分隔線，比起用一堆等號或是圖片還要更方便美觀；缺點就只是刪除時有點麻煩。
Word文檔軟件下載地址：Microsoft Word LTSC 2021 for Mac
https://www.macz.com/mac/1340.html?id=NzY4OTYwJl8mMjcuMTg2LjEwLjMx
win10Word文檔軟件下載：Microsoft Word 2019
https://soft.macxf.com/soft/365.html?id=MjkzODQ%3D
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
