資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究在 CSS 中，哪個屬性指定邊框的寬度？
在 CSS 中，`border` 屬性用於為任何 HTML 元素（例如 div）應用邊框。此外，我們還可以設定邊框的不同樣式、顏色、寬度等。
在本教程中，我們將學習設定元素邊框寬度的不同方法。此外，我們還將學習如何設定元素不同邊的寬度。
使用 `border-width` CSS 屬性設定邊框寬度
`border-width` CSS 屬性用於定義邊框的寬度。使用者可以傳遞四個值來設定不同邊的寬度。但是，最後三個值是可選的。
使用單個值作為邊框寬度將為所有四邊應用相同的邊框寬度。如果我們傳遞兩個值，則第一個值將被視為頂部和底部的邊框寬度，第二個值將被視為右側和左側的邊框寬度。
語法
使用者可以按照以下語法使用 `border-width` CSS 屬性設定邊框寬度。
border-width: top right bottom left; border-width: top-bottom right-left; border-width: top-bottom-right-left;
在上面的語法中，首先，我們為所有邊定義不同的寬度。之後，我們為頂部-底部和右側-左側定義不同的寬度，然後為所有邊定義相同的邊框寬度。
示例
在下面的示例中，我們建立了 div 元素併為邊框元素設定了 `5px` 的邊框寬度。在輸出中，使用者可以看到帶有虛線樣式的紅色邊框。
<html>
<style>
div {
border-style: dashed;
border-width: 5px;
border-color: red;
width: 600px;
height: 100px;
}
</style>
<body>
<h3> Using the <i> border-width CSS property </i> to set the border width of the elemenet. </h3>
<div>
Welcome to the world of CSS.
</div>
</body>
</html>
示例
在下面的示例中，我們使用 `border-width` CSS 屬性為元素的四條邊設定了不同的邊框寬度。我們為頂部邊框設定了 `5px` 寬度，為右側邊框設定了 `10px` 邊框寬度，為底部邊框設定了 `15px` 寬度，為左側邊框設定了 `20px` 邊框寬度。
在輸出中，使用者可以看到 div 元素每一側不同的邊框寬度。
<html>
<style>
div {
border-style: solid;
border-width: 5px 10px 15px 20px;
border-color: red;
width: 600px;
height: 200px;
padding: 10px;
}
</style>
<body>
<h3> Using the <i> border-width CSS property </i> to set the border width of the elemenet </h3>
<div>
<p> top border - 5px; </p>
<p> right border - 10px; </p>
<p> bottom border - 15px; </p>
<p> left border - 20px; </p>
</div>
</body>
</html>
使用 `border` CSS 屬性設定邊框寬度
`border` CSS 屬性接受三個值。第一個值指定邊框寬度，第二個值指定邊框樣式，第三個值指定邊框顏色。
在這裡，我們將重點關注第一個值來設定邊框寬度。
語法
使用者可以按照以下語法使用 `border` CSS 屬性設定邊框寬度。
border: 1rem solid blue;
示例
在下面的示例中，`border` CSS 屬性的 `1rem solid blue` 值設定了 1rem 寬度、紅色和實線樣式的邊框。要更改邊框寬度，我們需要更改第一個值。
<html>
<style>
div {
border: 1rem solid blue;
width: 500px;
height: 200px;
padding: 10px;
}
</style>
<body>
<h3> Using the <i> border CSS property </i> to set the border width of the elemenet </h3>
<div>
You are on the TutorialsPoint website!
</div>
</body>
</html>
示例
在 CSS 中，我們還可以使用 `thin`、`medium` 和 `thick` 值來設定邊框寬度。`thin` 值用於設定細邊框，`medium` 值設定比 `thin` 邊框更寬的邊框，`thick` 設定比 `medium` 更寬的寬度。
在下面的示例中，我們使用了三個 div 元素，並使用 `border` CSS 屬性賦予了不同的邊框寬度，使用者可以在輸出中看到。
<html>
<style>
p {
width: 200px;
height: 100px;
margin: 10px;
}
.first {
border: thin solid black;
}
.second {
border: medium solid black;
}
.third {
border: thick solid black;
}
</style>
<body>
<h3> Use the <i> border CSS property </i> to set the border width of the HTML element </h3>
<p class="first"> Thin border </p>
<p class="second"> Medium border </p>
<p class="third"> Thick border </p>
</body>
</html>
設定特定邊的邊框寬度
`border-top-width` CSS 屬性允許使用者設定頂部邊框的寬度。此外，使用者可以使用 `border-right-width`、`border-bottom-width` 和 `border-left-width` CSS 屬性分別設定元素的右側、底部和左側邊框的寬度。
語法
使用者可以按照以下語法使用不同的 CSS 屬性設定不同邊的邊框寬度。
border-top-width: 3px; border-right-width: 6px; border-bottom-width: 9px; border-left-width: 12px;
示例
在下面的示例中，我們建立了四個不同的 div 元素。我們為第一個 div 元素設定了頂部邊框寬度，為第二個 div 元素設定了右側邊框寬度，為第三個和第四個元素設定了底部和左側邊框寬度。
<html>
<style>
div {
width: 500px;
height: 100px;
margin: 10px;
}
.one {
border-top-width: 3px;
border-style: dotted;
border-color: red;
}
.two {
border-right-width: 6px;
border-style: solid;
border-color: green;
}
.three {
border-bottom-width: 9px;
border-style: dashed;
border-color: blue;
}
.four {
border-left-width: 12px;
border-style: double;
border-color: yellow;
}
</style>
<body>
<h2> Set the border width for the different sides of the element</h2>
<div class="one"> First div </div>
<div class="two"> Second div </div>
<div class="three"> Third div </div>
<div class="four"> Fourth div </div>
</body>
</html>
結論
使用者學習瞭如何使用各種 CSS 屬性設定 HTML 元素的邊框寬度。我們學習瞭如何使用 `border-width` 和 `border` CSS 屬性來設定邊框的寬度。此外，我們還學習瞭如何為元素的不同邊設定不同的邊框寬度。
176 次瀏覽
