outline-offset

outline-offset

<!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

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕星星 2019-02-15 17:32:12

你好,

outline-offset设置或检索对象外的线条轮廓偏移容器的值,想要实现十字架的效果有一个临界值。

当outline-offset设置负值时,会向内偏移,当设置的值*2(不用计算符号)与元素宽度相等时,元素就看不到了,没有了中间的部分,上下左右的outline挨着,如下:

http://img1.sycdn.imooc.com//climg/5c66869b000159a008700849.jpg

继续将值减少,以左右两边outline值为例,都是150px,两个同时向内移动,当移动自身一半的时候,两个重合:

http://img1.sycdn.imooc.com//climg/5c66868b0001ef7d09010876.jpg

在继续减小,两个就会分开,如下:

http://img1.sycdn.imooc.com//climg/5c6686c400016cbc08350809.jpg

慢慢的就会出现十字架的效果。

如果想要十字架细一些,可以继续将值减少,自己测试下吧。

祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
响应式开发与常用框架 2018
  • 参与学习           人
  • 提交作业       2198    份
  • 解答问题       5012    个

如果你有web端基础,既想进阶,又想进军移动端开发,那就来吧,我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等,让你在前端道路上畅通无阻!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师