CSS中如何为div设置内边框而不是边缘？

calendar 2023-09-09 10:40:47 · 1 min read · border css html

设置box-sizing属性为border-box可以实现将边框置于<div>元素内部而不是边缘的效果：

 1div {
 2    box-sizing: border-box;
 3    -moz-box-sizing: border-box;
 4    -webkit-box-sizing: border-box;
 5    width: 100px;
 6    height: 100px;
 7    border: 20px solid #f00;
 8    background: #00f;
 9    margin: 10px;
10}
11
12div + div {
13    border: 10px solid red;
14}

效果如下：

1<div>Hello!</div>
2<div>Hello!</div>

通过将box-sizing属性设置为border-box，可以确保边框的宽度被包括在<div>元素的宽度和高度内。这样，设置边框后，<div>元素的宽度仍为100px。这种方法在IE8及以上版本中都适用。

此外还有其他的解决方法，例如使用box-shadow或outline属性。具体可以参考下面的代码和链接。

参考答案及链接：

解决方案1：使用伪元素

 1.button {
 2    background: #333;
 3    color: #fff;
 4    float: left;
 5    padding: 20px;
 6    margin: 20px;
 7    position: relative;
 8}
 9
10.button::after {
11    content: '';
12    position: absolute;
13    top: 0;
14    right: 0;
15    bottom: 0;
16    left: 0;
17    border: 5px solid #f00;
18}

解决方案2：使用box-shadow属性

1div {
2    -webkit-box-shadow:inset 0px 0px 0px 10px #f00;
3    -moz-box-shadow:inset 0px 0px 0px 10px #f00;
4    box-shadow:inset 0px 0px 0px 10px #f00;
5}

参考链接：

解决方案3：使用outline属性

1div {
2   width:100px;
3   height:100px;
4   background-color: #aaa;
5   outline:10px solid black;
6}

参考链接：

解决方案4：使用box-shadow属性注意事项

1div {
2  box-shadow: 0px -3px 0px red inset;
3}

相关文章推荐