新增內邊框時如何保持div尺寸不變？-css教學-PHP中文網

新增內邊框時如何保持div尺寸不變？

Mary-Kate Olsen

發布： 2024-12-14 03:49:10

原創

162 人瀏覽過

How to Keep a Div's Dimensions Unchanged When Adding an Inner Border?

如何在不擴展其尺寸的情況下將邊框放置在 Div 內？

當設計

時帶有邊框的元素，預設行為是將邊框厚度加到元素的寬度和高度上。但是，您可能會遇到希望邊框出現在 div 現有尺寸內的情況。

要實現此效果，可以使用box-sizing 屬性並將其設為border-box：

div {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 20px solid #f00;
  background: #00f;
  margin: 10px;
}

登入後複製

透過將box-sizing 設定為border-box，div 的寬度和高度將包括邊框厚度，確保當邊框出現在其內部時，可見框保持相同的大小邊緣：

<pre class="brush:php;toolbar:false">box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 100px;
height: 100px;
border: 20px solid #f00;
background: #00f;
margin: 10px;

登入後複製

}

div div {

box-sizing: border-box;
border: 10px solid red;

登入後複製

}

您好！

你好！

以上是新增內邊框時如何保持div尺寸不變？的詳細內容。更多資訊請關注PHP中文網其他相關文章！