CSS 中哪一個屬性指定邊框的寬度？
- WBOY轉載
- 2023-08-29 21:09:03886瀏覽
在 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」和「borderleft-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屬性來設定邊框的寬度。此外，我們學會了為元素的不同邊設定不同的邊框寬度。
以上是CSS 中哪一個屬性指定邊框的寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！