CSS 中 border 与 outline 的区别

border 会占用空间，outline 不占用空间

border 边框占用空间，元素的定位是从边框开始的。案例如下：


                .border {
                    border: 10px solid black;
                }

outline 边框不会占用空间，元素的定位没有从边框开始。案例如下：


                .outline {
                    outline: 10px solid black;
                }

当我们要对某元素悬停时显示边框，使用 outline 就能避免元素将其他元素撑开

outline 不能单独设置某一边的样式

想要给不同的边设置不同的样式，使用 border 的 border-top border-right 等属性就能做到。案例如下：


                .border-diff {
                    border-top:10px solid red;
                    border-left:5px solid black;
                    border-bottom:15px solid blue;
                    border-left:20px solid blue;
                }

outline 无法像 border 那样设置单边样式，因为它没有类似 border 那样对应的 top、right 属性

outline 能通过 outline-offset 属性设置偏移

这个偏移能让边框与元素产生间隔


                .outline-offset {
                    background-color: #ccc;
                    outline: 5px solid black;
                    outline-offset: 5px;
                }

border 没有类似 border-offset 的属性