溫馨提示×

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

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

怎么在css中設(shè)置div邊框

發(fā)布時(shí)間：2021-04-02 14:15:31 來(lái)源：億速云 閱讀：273 作者：Leah 欄目：web開(kāi)發(fā)

怎么在css中設(shè)置div邊框？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

css設(shè)置div邊框的方法：首先創(chuàng)建一個(gè)HTML示例文件；然后定義好div塊；最后通過(guò)“border-style”屬性設(shè)置邊框的樣式即可。

border屬性是一個(gè)簡(jiǎn)寫(xiě)屬性，可以在一個(gè)聲明設(shè)置所有的邊框?qū)傩?。例：邊框的寬度、邊框的樣式、邊框的顏色?br/>

可以按順序設(shè)置如下屬性：

border-width：規(guī)定邊框的寬度。

border-style：規(guī)定邊框的樣式。

怎么在css中設(shè)置div邊框

border-color：規(guī)定邊框的顏色。

如果不設(shè)置其中的某個(gè)值，也不會(huì)出問(wèn)題，比如 border:solid #ff0000; 也是允許的。

瀏覽器支持

怎么在css中設(shè)置div邊框

表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。

所有瀏覽器都支持 border 屬性。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
margin: 10px;
}
div.none {
border: none;
}
div.dotted {
border:3px dotted pink;
}
div.dashed {
border:3px dashed paleturquoise;
}
div.solid {
border:3px solid peru;
}
div.double {
border:3px double #009999;
}
div.groove {
border:3px groove #CCC;
}
div.ridge {
border:3px ridge;
}
div.inset {
border:3px inset;
}
div.outset {
border:3px outset;
}
div.hidden {
border: hidden;
}
</style>
</head>
<body>
<div class="none">無(wú)邊框。</div>
<div class="dotted">虛線邊框。</div>
<div class="dashed">虛線邊框。</div>
<div class="solid">實(shí)線邊框。</div>
<div class="double">雙邊框。</div>
<div class="groove">凹槽邊框。</div>
<div class="ridge">壟狀邊框。</div>
<div class="inset">嵌入邊框。</div>
<div class="outset">外凸邊框。</div>
<div class="hidden">隱藏邊框。</div>
</body>
</html>

效果圖：

怎么在css中設(shè)置div邊框

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。

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

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎ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)容。

css
AI
助
手