習(xí)HTML時(shí)有時(shí)候我們需要用代碼設(shè)置邊框或虛線邊框的樣式,那該怎么設(shè)置呢?下面上海非凡進(jìn)修學(xué)院HTML5開(kāi)發(fā)培訓(xùn)機(jī)構(gòu)大咖分享下html虛線邊框設(shè)置教程,會(huì)對(duì)幾個(gè)不同標(biāo)簽加虛線邊框效果樣式,同學(xué)們可以根據(jù)示例靈活掌握與應(yīng)用到自己DIV+CSS布局中。
為了對(duì)html不同標(biāo)簽加邊框虛線,我們選擇幾個(gè)常用標(biāo)簽對(duì)齊設(shè)置邊框虛線效果。
1、html常用標(biāo)簽
div標(biāo)簽
span
ul li
table tr td
2、實(shí)例用到CSS屬性單詞
border
width
height
3、實(shí)現(xiàn)虛線的CSS重點(diǎn)介紹
border為邊框?qū)傩裕绻獙?shí)現(xiàn)對(duì)象邊框效果,要設(shè)置邊框?qū)挾取⑦吙蝾伾⑦吙驑邮剑▽?shí)線還是虛線)
border:1px dashed #F00 這個(gè)就是設(shè)置邊框樣式寬度為1px,虛線,虛線為紅色。
4、實(shí)例描述
我們對(duì)以上幾個(gè)標(biāo)簽設(shè)置相同寬度、相同高度、邊框效果。
5、HTML代碼示例:
以上示例對(duì)html中不同標(biāo)簽設(shè)置相同的樣式,包括相同邊框虛線。
上海HTML5開(kāi)發(fā)培訓(xùn)機(jī)構(gòu)大咖提示邊框三個(gè)樣式
通常我們可以對(duì)邊框設(shè)置寬度(厚度)、邊框樣式、邊框顏色這三個(gè)屬性與參數(shù)。
1)、邊框顏色:border-color:#000
2)、邊框厚度(寬度):border-width:1px
使用數(shù)字+單位設(shè)置邊框厚度寬度,如1px(邊框厚度寬度為1像素),邊框必須為正數(shù)字,大于0的數(shù)值。否則設(shè)置邊框border樣式無(wú)效。
3)、border邊框樣式:border-style:solid
上海HTML5開(kāi)發(fā)培訓(xùn)機(jī)構(gòu)大咖提示:邊框border樣式值如下:
none :無(wú)邊框。與任何指定的border-width值無(wú)關(guān)
hidden : 隱藏邊框。IE不支持
dotted : 在MAC平臺(tái)上IE4+與WINDOWS和UNIX平臺(tái)上IE5.5+為點(diǎn)線。否則為實(shí)線(常用)
dashed : 在MAC平臺(tái)上IE4+與WINDOWS和UNIX平臺(tái)上IE5.5+為虛線。否則為實(shí)線(常用)
solid :實(shí)線邊框(常用)
double : 雙線邊框。兩條單線與其間隔的和等于指定的border-width值
groove : 根據(jù)border-color的值畫(huà)3D凹槽
ridge :根據(jù)border-color的值畫(huà)菱形邊框
inset : 根據(jù)border-color的值畫(huà)3D凹邊
outset : 根據(jù)border-color的值畫(huà)3D凸邊
天,我們來(lái)看這么一個(gè)非常常見(jiàn)的切圖場(chǎng)景,我們需要一個(gè)帶圓角的虛線邊框,像是這樣:
這個(gè)我們使用 CSS 還是可以輕松解決的,代碼也很簡(jiǎn)單,核心代碼:
div {
border-radius: 25px;
border: 2px dashed #aaa;
}
但是,原生的 dashed 有一個(gè)問(wèn)題,就是我們無(wú)法控制虛線的單段長(zhǎng)度與間隙。
假設(shè),我們要這么一個(gè)效果呢虛線效果呢:
此時(shí),由于無(wú)法控制 border: 2px dashed #aaa 產(chǎn)生的虛線的單段長(zhǎng)度與線段之間的間隙,border 方案就不再適用了。
那么,在 CSS 中,我們還有其它方式能夠?qū)崿F(xiàn)帶圓角,且虛線的單段長(zhǎng)度與線段之間間隙可控的方式嗎?
本文,我們就一起探討探討。
上面的場(chǎng)景,使用 CSS 實(shí)現(xiàn)起來(lái)比較麻煩的地方在于,圖形有一個(gè) border-radius。
如果不帶圓角,我們可以使用漸變,很容易的模擬虛線效果。
我們可以使用線性漸變,輕松的模擬虛線的效果:
div {
width: 150px;
height: 100px;
background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x;
background-size: 4px 1px;
background-position: 0 0;
}
看看,使用漸變模擬的虛線如下:
解釋一下上面的代碼:
因此,我們只需要修改 background 的參數(shù),就可以得到各種不一樣的虛線效果:
完整的代碼,你可以戳這里:CodePen Demo -- Linear-gradient Dashed Effect
并且,漸變是支持多重漸變的,因此,我們把容器的 4 個(gè)邊都用漸變表示即可:
div {
background:
linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
background-position: 0 0, 0 100%, 0 0, 100% 0;
}
效果如下:
但是,如果要求的元素帶 border-radius 圓角,這個(gè)方法就不好使了,整個(gè)效果就會(huì)穿幫。
因此,在有圓角的情況下,我們就需要另辟蹊徑。
當(dāng)然,本質(zhì)上我們還是需要借助漸變效果,只是,我們需要轉(zhuǎn)換一下思路。
譬如,我們可以使用角向漸變。
假設(shè),我們有這么一個(gè)帶圓角的元素:
<div></div>
div {
width: 300px;
height: 200px;
background: #eee;
border-radius: 20px;
}
效果如下:
如果我們修改內(nèi)部的 background: #eee,把它替換成重復(fù)角向漸變的這么一個(gè)圖形:
div {
//...
- background: #eee;
+ background: repeating-conic-gradient(#000, #000 3deg, transparent 3deg, transparent 6deg);
}
解釋一下,這段代碼創(chuàng)建了一個(gè)重復(fù)的角向漸變背景,從黑色(#000)開(kāi)始,每 3deg 變?yōu)橥该鳎缓笤購(gòu)耐该鞯胶谏源搜h(huán)重復(fù)。
此時(shí),這樣的背景效果可用于創(chuàng)建一種漸變黑色到透明的重復(fù)紋理效果:
在這個(gè)基礎(chǔ)上,我們只需要給這個(gè)圖形上層,再利用偽元素,疊加一層顏色,就得到了我們想要的邊框效果,并且,邊框間隙和大小可以簡(jiǎn)單調(diào)整。
完整的代碼:
div {
position: relative;
width: 300px;
height: 200px;
border-radius: 20px;
background: repeating-conic-gradient(#000, #000 3deg, transparent 3deg, transparent 6deg);
&::before {
content: "";
position: absolute;
inset: 1px;
background: #eee;
border-radius: 20px;
}
}
效果如下:
乍一看,效果還不錯(cuò)。但是如果仔細(xì)觀察,會(huì)發(fā)現(xiàn)有一個(gè)致命問(wèn)題:虛線線段的每一截長(zhǎng)度不一致。
只有當(dāng)圖形的高寬一致時(shí),線段長(zhǎng)度才會(huì)一致。高寬比越遠(yuǎn)離 1,差異則越大:
完整的代碼,你可以戳這里:CodePen Demo -- BorderRadius Dashed Border
那有沒(méi)有辦法讓虛線長(zhǎng)度能夠保持一樣呢?
可以!我們?cè)贀Q一種漸變,我們改造一下底下的角向漸變,重新利用重復(fù)線性漸變:
div {
border-radius: 20px;
background:
repeating-linear-gradient(
-45deg,
#000 0,
#000 7px,
transparent 7px,
transparent 10px
);
}
此時(shí),我們能得到這樣一個(gè)斜 45° 的重復(fù)線性漸變圖形:
與上面方法一類似,再通過(guò)在這個(gè)圖形的基礎(chǔ)上,在元素中心,疊加多一層純色遮罩圖形,只漏出最外圍一圈的圖形,帶圓角的虛線邊框就實(shí)現(xiàn)了:
此方法比上面第一種漸變方法更好之處在于,虛線每一條線段的長(zhǎng)度是固定的!是不是非常的巧妙?
完整的代碼,你可以戳這里:CodePen Demo -- BorderRadius Dashed Border
當(dāng)然,上面使用 CSS 實(shí)現(xiàn)帶圓角的虛線邊框,還是需要一定的 CSS 功底。
并且,不管是哪個(gè)方法,都存在一定的瑕疵。譬如如果希望邊框中間不是背景色,而是鏤空的,上述兩種 CSS 方式都將不再使用。
因此,對(duì)于帶圓角的虛線邊框場(chǎng)景,最佳方式一定是 SVG。(切圖也算是吧,但是靈活度太低)
只是很多人看到 SVG 會(huì)天然的感到抗拒,或者認(rèn)為 SVG 不太好掌握。
所以,本文再介紹一個(gè)非常有用的開(kāi)源工具 -- Customize your CSS Border:
通過(guò)這個(gè)開(kāi)源工具,我們可以快速生成我們想要的虛線邊框效果,并且一鍵復(fù)制可以嵌入到 CSS background 中的 SVG 代碼圖片格式。
圖形的大小、邊框的粗細(xì)、虛線的線寬與間距,圓角大小統(tǒng)統(tǒng)是可以可視化調(diào)整的。
通過(guò)一個(gè)動(dòng)圖,簡(jiǎn)單感受一下:
本文介紹了 2 種在 CSS 中,不借助切圖和 SVG 實(shí)現(xiàn)帶圓角的虛線邊框的方式:
當(dāng)然,兩種 CSS 方式都存在一定瑕疵,但是對(duì)于一些簡(jiǎn)單場(chǎng)景是能夠 Cover 住的。
最后,介紹了借助 SVG 工具 Customize your CSS Border 快速生成帶圓角的虛線邊框的方式。將 SVG 生成的矢量圖像數(shù)據(jù)直接嵌入到 background URL 中,能夠應(yīng)付幾乎所有場(chǎng)景,相對(duì)而言是更好的選擇。
好了,本文到此結(jié)束,希望本文對(duì)你有所幫助 :)
作者:Chokcoco
鏈接:https://juejin.cn/post/7311681326712487999
order 盒子邊框
復(fù)合屬性。設(shè)置對(duì)象邊框的特性。
盒子邊框三要素:
① 邊框粗細(xì)
② 邊框樣式
③ 邊框顏色
語(yǔ)法:border: border-width | border-style | border-color ;
邊框四邊的粗細(xì)、樣式、顏色,以及上下左右每個(gè)位置的樣式屬性都是可以單獨(dú)調(diào)整的。
邊框的顏色不是必要的,如果不指定顏色,默認(rèn)顏色為黑色,但必須為盒子指定寬高。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 500px;
height: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
使用 border-style 可為盒子邊框設(shè)置樣式,以下示例為實(shí)線
/* CSS代碼 */
div{
width: 500px;
height: 50px;
border-style: solid;
}
效果:
示例 CSS 代碼
如果需要設(shè)置不同方向的樣式屬性,可以寫(xiě)在一句 CSS 代碼里,比如說(shuō)下面這段代碼,上下實(shí)線,左右虛線。
/* CSS代碼 */
div{
width: 500px;
height: 50px;
border-style: solid dashed;
}
效果:
屬性值解釋none無(wú)輪廓。 border-color將被忽略,border-width計(jì)算值為0,除非邊框輪廓為圖像,即border-image。hidden隱藏邊框。IE7及以下尚不支持dotted點(diǎn)狀輪廓。IE6下顯示為dashed效果dashed虛線輪廓solid實(shí)線輪廓double雙線輪廓。兩條單線與其間隔的和等于指定的border-width值groove3D凹槽輪廓ridge3D凸槽輪廓inset3D凹邊輪廓outset3D凸邊輪廓
使用 border-width 可為盒子邊框設(shè)置粗細(xì),以下示例邊框?yàn)?5px 粗細(xì)
/* CSS代碼 */
div{
width: 500px;
height: 50px;
border-style: solid;
border-width: 5px;
}
效果
示例 CSS 代碼
如果需要設(shè)置不同方向的邊框粗細(xì),可以寫(xiě)在一句 CSS 代碼里。
比如說(shuō)下面這段代碼,上下2px,右2px,左5px。
/* CSS代碼 */
div{
width: 500px;
height: 50px;
border-style: solid;
border-width:2px 2px 2px 5px;
}
效果:
可直接輸入
顏色的英文名稱
rgb值
十六進(jìn)制
使用 border-color 可為盒子邊框設(shè)置顏色,以下示例邊框顏色為紅色。
/* CSS代碼 */
div{
width: 500px;
height: 50px;
border-style: solid;
border-width:2px 2px 2px 5px;
border-color: red;
}
效果:
示例 CSS 代碼
上面有兩個(gè)示例講述如何設(shè)置不同方向的屬性,border-color 也是相同使用方法,此處就不做示例了。
如果你需要同時(shí)設(shè)置盒子的粗細(xì)、樣式、顏色,那么你可以將他們的樣式表寫(xiě)在同一行代碼里。
例如:
/* CSS代碼 */
div{
border-top: 5px solid red;
}
這段代碼指定了上邊框的三個(gè)屬性:粗細(xì)、樣式、顏色
border-top 包含了:
其他同理
先來(lái)看一個(gè)示例
/* CSS代碼 */
div{
width: 100px;
height: 100px;
border-top: 50px solid red;
border-right: 50px solid blue;
border-bottom: 50px solid green;
border-left: 50px solid pink;
}
效果:
細(xì)心的你,一定發(fā)現(xiàn)了 border 的邊框四條邊交接處是斜角。
此刻我們把盒子的寬高設(shè)置為 0
/* CSS代碼 */
div{
width: 0;
height: 0;
border-top: 50px solid red;
border-right: 50px solid blue;
border-bottom: 50px solid green;
border-left: 50px solid pink;
}
效果:
是不是完完全全像四個(gè)三角形一樣。
我們只需要把上邊和左右兩邊的三角形隱藏起來(lái),它不就是一個(gè)三角形了。
為 border-color 指定 transparent 值,使盒子邊框顏色變透明
/* CSS代碼 */
div{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid green;
border-left: 50px solid transparent;
}
效果:
把另外三條邊透明之后,就只剩一個(gè)三角形了。
完
部分資料引用自:
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。