html - css 使用 边框 border 的时候,怎么让他作为内边框。

Question

.bk{
border-style:solid;
border-width:10px;
border-color:red;
}

这个,怎么让他朝内?就是不改变宽度高度?

Answer 1

box-sizing:border-box; not supported under IE8

Answer 2

box-sizing:border-box;

Answer 3

There is no css attribute that can directly create the effect you want, you can only simulate it

style="

border-bottom: 50px solid red;
border-top: 50px solid blue;
border-left: 50px solid white;
border-right: 50px solid black;
height: 0;
width: 0;

"

Answer 4

The height and width remain unchanged and the padding is set to the border

Answer 5

There are two implementation options,
The first one uses css pseudo-classes

    .bk{
        position: relative;
        width:100px;
        height:100px;
    }
    .bk:before{
        content:"";
        position: absolute;
        top:0;
        left:0;
        width:98px;
        height:98px;
        border:1px solid #666;
    }

The second method uses the inner shadow of the box-shadow box shadow. I won’t post the specific code. If you don’t understand, just learn it yourself.
If the subject of the question caused the layout to be damaged because of the border, you need to understand how the box model of the element is calculated.