整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
常開(kāi)發(fā)中，單邊框的樣式實(shí)現(xiàn)已經(jīng)家常便飯了，邊框?qū)傩猿Ｓ玫挠?border-color、border-style、border-width。border-color 和 border-width 指定了邊框的顏色和寬度，border-style 指定了邊框是實(shí)心、虛線(xiàn)、雙線(xiàn)還是其他樣式。今天和大家一起探討使用 CSS 創(chuàng)建雙邊框的幾種實(shí)現(xiàn)方案。
通過(guò) html:5 和 (div.box.box-$>h2{box $})*6 快速創(chuàng)建頁(yè)面框架，通過(guò) flex 布局讓容器排列美觀(guān)，并給每個(gè)容器設(shè)置不同的顏色。
<!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 上創(chuàng)建雙邊框效果。border-style 的可取值有很多，使用 border-style: double 創(chuàng)建雙邊框是最常規(guī)的方法。
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;
}
通過(guò) border-style CSS 屬性，我們可以在方框的四邊設(shè)置元素的線(xiàn)條樣式。該屬性可分配多個(gè)關(guān)鍵字值。
要?jiǎng)?chuàng)建雙邊框，可使用 double 關(guān)鍵字值。這會(huì)自動(dòng)在兩條邊框線(xiàn)之間創(chuàng)建填充。我們還可以使用 border-[top/right/bottom/left] 在元素的特定邊上創(chuàng)建雙邊框樣式。
我們使用 outline 屬性在 .box-2 上創(chuàng)建雙邊框效果。outline 和 border 類(lèi)似，但 outline 不會(huì)占用任何空間，因?yàn)樗鼈兪窃谠貎?nèi)容之外繪制的，此外，邊框則提供了更多的樣式選項(xiàng)。例如，每條邊框線(xiàn)都可以使用不同的顏色。
要使用 outline 屬性實(shí)現(xiàn)雙邊框效果，我們需要使用一個(gè)邊框和一個(gè)輪廓。不過(guò)，與 border-style 屬性不同，outline 屬性不會(huì)自動(dòng)在自身和邊框之間創(chuàng)建空隙。要在輪廓和邊框之間添加空隙，我們需要使用 outline-offset 屬性。
我們?cè)?.box-2 上使用 outline 屬性：
.box-2 {
border: 5px solid #f00;
outline: 5px solid #00f;
outline-offset: -10px;
}
如上代碼所示，outline-offset 屬性可用于向內(nèi)調(diào)整輪廓（例如設(shè)置負(fù)值，如 -20px）或向外調(diào)整輪廓（例如設(shè)置正值，如 5px）。在這里，我們使用了負(fù)的輪廓偏移來(lái)向內(nèi)調(diào)整藍(lán)色輪廓，使紅色邊框看起來(lái)像是外部的雙邊框
我們使用 ::before 偽元素在 .box-3 上創(chuàng)建雙邊框效果，使用 CSS 偽元素創(chuàng)建雙邊框也比較簡(jiǎn)單，即通過(guò)定位將 ::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 屬性在方框上方創(chuàng)建了一個(gè)藍(lán)色外部邊框。同時(shí)將綠色內(nèi)部邊框設(shè)置為絕對(duì)定位，并使用頂部、左側(cè)、底部和右側(cè)值對(duì)其進(jìn)行定位，流出間隙。
我們使用 box-shadow 屬性在 .box-4 上創(chuàng)建雙邊框效果。通過(guò)使用兩個(gè)逗號(hào)分隔的陰影，將偏移和模糊設(shè)置為零，并賦予每個(gè)陰影適當(dāng)?shù)拇笮。涂梢允购袪铌幱翱雌饋?lái)像雙邊框：
.box-4 {
width: 280px;
height: 130px;
margin: 10px;
box-shadow:
0 0 0 5px red,
0 0 0 10px green;
}
在本例中，第二個(gè)（綠色）陰影是第一個(gè)（紅色）陰影的兩倍，但由于它們重疊在一起，所以看起來(lái)大小相同。還有個(gè)區(qū)別是 box-shadow 會(huì)變向改變?nèi)萜鞯囊曈X(jué)尺寸，這里為了和其他盒子對(duì)齊，手動(dòng)對(duì)盒子的寬高和外邊距進(jìn)行了干預(yù)。
我們使用 background-clip 屬性在 .box-5 元素上創(chuàng)建雙邊框效果：
.box-5 {
border: 5px solid red;
padding: 5px;
background-clip: content-box;
}
我們使用 CSS background-clip 屬性使方框元素的背景僅填充 content-box 區(qū)域。這樣就在內(nèi)容框周?chē)a(chǎn)生了間距，看起來(lái)就像有了一個(gè)白色邊框。加上元素的常規(guī)邊框就有點(diǎn)像雙邊框了。
效果如下：
我們使用 linear-gradient() 函數(shù)在 .box-6 上創(chuàng)建一個(gè)雙邊框。該函數(shù)可用于沿直線(xiàn)在兩種或多種顏色之間產(chǎn)生漸變過(guò)渡。在本例中，我們首先給 .box-6 元素設(shè)置 5px 寬的綠色邊框。然后，在背景屬性中為每一側(cè)設(shè)置線(xiàn)性漸變：
.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);
}
效果如下：
整體效果：
一、基本線(xiàn)條：
1、<HR>
2、align線(xiàn)條位置（可選left、right、center）；width線(xiàn)條長(zhǎng)度；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、虛線(xiàn)：
<HR style="border:3 double #987cb9" width="80%"color=#987cb9 SIZE=3>6、雙線(xiàn)：
<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">９．垂直分割線(xiàn)
<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 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]
Word 里大家會(huì)怎么畫(huà)直線(xiàn)或底線(xiàn)呢？千萬(wàn)不要再用一堆「-」號(hào)組成，也不要用空白鍵+ 底線(xiàn)的方式了。其實(shí) Word 有內(nèi)建非常方便的畫(huà)線(xiàn)方式，只要幾個(gè)步驟，無(wú)論是單橫線(xiàn)、雙橫線(xiàn)、虛線(xiàn)、波浪線(xiàn)、分隔線(xiàn)等等都沒(méi)有問(wèn)題。
不過(guò)，Word 這種畫(huà)線(xiàn)的方式有個(gè)不易刪除的缺點(diǎn)，小編教大家如何刪除，以及不小心畫(huà)出直線(xiàn)后該如何避免再次啟用這工能。
Word 畫(huà)線(xiàn)方法：底線(xiàn)、虛線(xiàn)都可以這樣畫(huà)
在微軟office Word 里面畫(huà)線(xiàn)的方法意外地簡(jiǎn)單，大家現(xiàn)在可以打開(kāi)Word 試試看（Windows/Mac 版皆可），在空白處打三個(gè)「=」并按下Enter 輸入鍵，就會(huì)自動(dòng)生成雙底線(xiàn)了。
單行橫線(xiàn)或底線(xiàn)也是一樣的方法，打三個(gè)「-」并按下Enter 確認(rèn)鍵，就會(huì)生成一條的底線(xiàn)。
所有Word 的橫線(xiàn)指令如下：
雙橫線(xiàn)
橫線(xiàn)（底線(xiàn)）
波浪線(xiàn)
虛線(xiàn)
分隔線(xiàn)
畫(huà)出來(lái)的效果如下：
至于使用的方法也很容易理解，像是「=」這符號(hào)本身就是雙橫線(xiàn)、「-」就是一條橫線(xiàn)、「~」就是波浪線(xiàn)，這些都很直覺(jué)；至于「*」打出來(lái)其實(shí)也很像虛線(xiàn)，要記的只有「三個(gè)#」這指令。
如何刪除Word 生成的直線(xiàn)？
如果大家有嘗試了上面這種輸入底線(xiàn)的方式，會(huì)發(fā)現(xiàn)居然沒(méi)辦法直接用 Delete 或刪除鍵把它刪除。如果經(jīng)常不小心畫(huà)出這種橫線(xiàn)，要怎么把它刪掉呢？或是關(guān)閉自動(dòng)生成畫(huà)線(xiàn)的快捷鍵，避免以后不小心誤用。
首先，在剛打出直線(xiàn)之后，可以看到旁邊有一個(gè)閃電符號(hào)；這個(gè)閃電符號(hào)過(guò)一陣子或是進(jìn)行其他指令后就會(huì)消失，所以如果要取消橫線(xiàn)，可以先趁閃電符號(hào)還在的時(shí)候按下去：
這時(shí)就可以點(diǎn)「復(fù)原框線(xiàn)線(xiàn)條」，就可以把剛剛產(chǎn)生的橫線(xiàn)刪除了。（這一系列橫線(xiàn)的官方名稱(chēng)就叫做「框線(xiàn)線(xiàn)條」）；如果要關(guān)掉「三個(gè)– 加enter」之類(lèi)的快速鍵，也可以點(diǎn)下方的「停止自動(dòng)建立框線(xiàn)」：
刪除過(guò)后的橫線(xiàn)，就會(huì)變成原本輸入的「三個(gè)等于」或「三個(gè)減號(hào)」，不會(huì)再產(chǎn)生橫線(xiàn)了。
如果沒(méi)有閃掉符號(hào)了怎么刪除線(xiàn)條？
如果已經(jīng)沒(méi)了閃電符號(hào)，要怎么把剛剛產(chǎn)生的底線(xiàn)刪除呢？首先，先讓鼠標(biāo)位于「橫線(xiàn)上一段的最前面」：
然后在頂部的工具列，或是「編輯」>「清除」>「清除格式」，點(diǎn)下去之后，剛剛產(chǎn)生的橫線(xiàn)就會(huì)消失了。
用這個(gè)方法畫(huà)橫線(xiàn)、底線(xiàn)、分隔線(xiàn)，比起用一堆等號(hào)或是圖片還要更方便美觀(guān)；缺點(diǎn)就只是刪除時(shí)有點(diǎn)麻煩。
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
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
