老师，这什么原理啊？怎么outline-offset为负数，正方形就变成十字架了？

来源：1-6 编程练习

李可意

2019-10-16 11:59:49

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 150px;
            height: 150px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            outline: 30px solid red;
            outline-offset: -95px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

写回答

1回答

好帮手慕码

2019-10-16

同学你好！

例如此代码：

首先，要明确outline是干什么的，outline是设置或检索对象外的线条轮廓，它不占据布局空间，不会影响元素的尺寸（即不影响我们的定义的盒子宽度100px和高度100px的绿色盒子的大小），即：

outline-offset设置或检索对象外的线条轮廓偏移容器的值。不占据布局空间，不会影响元素的尺寸（即不影响我们的定义的盒子宽度100px和高度100px的绿色盒子的大小）；

outline-offset设置或检索对象外的线条轮廓偏移容器的值，简单理解就是控制outline定义的红色轮廓往哪里移动，当outline-offset设置成负值的时候，outline定义的四个红色轮廓都会向中间移动，当上轮廓和下轮廓全部移动到中心发生重合的时候，就会出现十字架的水平方向的横线，同理，当左轮廓和右轮廓同时移动到中心放生重合的时候，就会出现十字架垂直方向的竖线。观察下列变化过程理解一下：