溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

html怎么設(shè)置div邊框樣式css布局

發(fā)布時(shí)間：2022-03-04 16:49:23 來(lái)源：億速云 閱讀：663 作者：iii 欄目：web開(kāi)發(fā)

本文小編為大家詳細(xì)介紹“html怎么設(shè)置div邊框樣式css布局”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“html怎么設(shè)置div邊框樣式css布局”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

div設(shè)置邊框花樣所應(yīng)用CSS款式為邊框?qū)傩詁order。

html怎么設(shè)置div邊框樣式css布局
div虛線(xiàn)與完成邊框款式圖

一、決定兼容邊框線(xiàn)條名堂

border邊框兼容各大瀏覽器線(xiàn)條花樣有：
1、虛線(xiàn) dashed
2、實(shí)線(xiàn) solid
另外邊框線(xiàn)條格式閱讀器兼容具有未必不同一題目。

二、div設(shè)置虛線(xiàn)邊框

1、div四邊設(shè)置虛線(xiàn)邊框
1）、環(huán)節(jié)css代碼：border:2px dashed #F00

2）、殘缺html css代碼

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div四邊均配置血色虛線(xiàn)邊框 實(shí)例 css5.com.cn</title>
<style>
.div-x{width:300px; height:60px;border:2px dashed #F00}
</style>
</head>
<body>
<div class="div-x">div四邊設(shè)置裝備擺設(shè)虛線(xiàn)邊框</div>
</body>
</html>

3）、效果截圖

html怎么設(shè)置div邊框樣式css布局
設(shè)置裝備擺設(shè)div四條邊為虛線(xiàn)邊框

2、單獨(dú)設(shè)置div上邊、下邊、左邊、右邊分歧色彩虛線(xiàn)邊框

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div單邊設(shè)置虛線(xiàn)邊框 實(shí)例 css5.com.cn</title>
<style>
.div-dan{width:300px;height:60px;
border-top:2px dashed #F00;border-right:2px dashed #0F0;
border-bottom:2px dashed #00F;border-left:2px dashed #FF0
}
</style>
</head>
<body>
<div class="div-dan">div四邊獨(dú)自配置虛線(xiàn)邊框</div>
</body>
</html>

html怎么設(shè)置div邊框樣式css布局
對(duì)div單獨(dú)設(shè)置裝備擺設(shè)差別邊差異虛線(xiàn)邊框顏色

以上對(duì)div四條邊別離配置分歧邊框色采。

3、對(duì)div三邊設(shè)置裝備擺設(shè)虛線(xiàn)邊框

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div三邊設(shè)置裝備擺設(shè)虛線(xiàn)邊框 實(shí)例 css5.com.cn</title>
<style>
.div-dan{width:300px;height:60px;
border:2px dashed #F00;border-bottom:0}
</style>
</head>
<body>
<div class="div-dan">div三邊配置虛線(xiàn)邊框</div>
</body>
</html>

html怎么設(shè)置div邊框樣式css布局
對(duì)div三邊設(shè)置裝備擺設(shè)虛線(xiàn)邊框

闡明：
首先配置4條邊均虛線(xiàn)邊框（border:2px dashed #F00;），再獨(dú)自配置不緊要設(shè)置邊框的邊框設(shè)置邊框?yàn)?（border-bottom:0），何等即容易能力性設(shè)置div三邊邊框名堂，需要屬意是，border-bottom:0在border:2px dashed #F00背面，因?yàn)闉g覽器讀取CSS從左到右讀取，起首閱讀器讀取4邊邊框格局，再讀取下邊框border-bottom沒(méi)有邊框，這樣就可出現(xiàn)三邊框構(gòu)造。

讀到這里，這篇“html怎么設(shè)置div邊框樣式css布局”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手