请问老师原理是什么
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
border:0;
padding:0;
}
div{
/*此处写代码*/
width:100px;
height:100px;
background:white;
margin:200px auto;
outline:100px solid red;
outline-offset:-133px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
请问老师我想请问十字架的实现原理到底是什么？？？
Offset为负数难道不应该四边都想内吗。为什么会成为十字架的样子？可以详细解释下吗？
我理解是四个边都缩进了133px，这样不该应该是一个矩形吗
正在回答 回答被采纳积分+1
请问老师是这个意思吗 outline想内偏移也就是值为负数的时候
当四个outline轮廓线完全重合 也就是四个轮廓线重合为到一起的时候 比如
'<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2-9</title>
<style type="text/css">
div.one{
background-color: red;
height: 200px;
width: 200px;
outline: 200px solid black;
outline-offset: -200px;
margin: 1000px 1000px;
-webkit-resize:horizontal;
overflow: auto;
}
</style>
</head>
<body>
<div class="one">
</div>
<!-- <div class="two"></div> -->
</script>
</body>
</html>'之后在继续缩小才会成为十字架对吧
可是请问老师我不明白的是当他重合完毕继续负偏移也就是假如偏移为-250px的时候 他不应该有50px又偏移出来了（也就是这50px没有产生重合了），已经完全重合了为什么outline还会慢慢变小？
1、首选你要明确outline是干什么的，outline是设置或检索对象外的线条轮廓，它不占据布局空间，不会影响元素的尺寸（即不影响我们的定义的盒子宽度100px和高度100px的绿色盒子的大小），即：
2、outline-offset设置或检索对象外的线条轮廓偏移容器的值。不占据布局空间，不会影响元素的尺寸（即不影响我们的定义的盒子宽度100px和高度100px的绿色盒子的大小）；
outline-offset设置或检索对象外的线条轮廓偏移容器的值，简单理解就是控制outline定义的红色轮廓往哪里移动，当outline-offset设置成负值的时候，outline定义的四个红色轮廓都会向中间移动，当上轮廓和下轮廓全部移动到中心发生重合的时候，就会出现十字架的水平方向的横线，同理，当左轮廓和右轮廓同时移动到中心放生重合的时候，就会出现十字架垂直方向的竖线。观察下列变化过程理解一下：
希望可以帮到你~
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星