outline-offset
来源：1-6 编程练习
soso_crazy
2019-02-15 16:45:29
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
/*此处写代码*/
margin:100px;
width:300px;
height:300px;
background:white;
outline:150px solid red;
outline-offset: 0px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>outline-offset如何设置才能遮住四角？取值有什么计算方法才能遮住四角
写回答
1回答
-
好帮手慕星星
2019-02-15
你好，
outline-offset设置或检索对象外的线条轮廓偏移容器的值，想要实现十字架的效果有一个临界值。
当outline-offset设置负值时，会向内偏移，当设置的值*2（不用计算符号）与元素宽度相等时，元素就看不到了，没有了中间的部分，上下左右的outline挨着，如下：
继续将值减少，以左右两边outline值为例，都是150px，两个同时向内移动，当移动自身一半的时候，两个重合：
在继续减小，两个就会分开，如下：
慢慢的就会出现十字架的效果。
如果想要十字架细一些，可以继续将值减少，自己测试下吧。
祝学习愉快！
0
相似问题