CSS魔法殿堂：我们忽略的大纲

.outline0{outline:0;}.outline-none{大纲：无；}前言CSS魔法殿堂：改变单选按钮的颜色太挑剔了！本篇我们想模拟原生单选框通过Tab键获取焦点的效果。这就涉及到一个经常被忽视的属性——outline。因为之前对它的印象实在是很模糊，所以本文打算对它进行一点深入的研究^_^Spec是这样描述它的作用的用于创建视觉对象的轮廓（border-boxofthe元素），比如表单按钮的轮廓等。与边框不同，轮廓不占用文档空间；outline不一定是矩形。具体属性说明/*outlinecolor*invert表示颜色反转，即使在不同的背景色下也能看到outline*/outline-color:invert|<颜色名称>|<十六进制数>||继承/*轮廓虚线|虚线|固体|双|凹槽|脊|插图|开始|inherit/*轮廓宽度*/outline-width:medium|薄|厚|<长度>|inherit/*一次性设置轮廓的颜色、样式和宽度*/outline:;/*轮廓的偏移量，如果大于0，轮廓会扩大，如果小于0，轮廓会扩大Outlinereduction*/outline-offset:0px;细节决定成败Compatibilityoutline是CSS2.1规范，所以IE6/7/8(Q)不支持，在IE8下写正确的DOCTYPE是支持outline属性的。IE不支持outline-offset。IE6/7/8(Q)下隐藏轮廓要在IE6/7/8(Q)下隐藏轮廓效果，只需给元素添加hideFocus特性即可。outline:0和outline:none的区别在Chrome下执行如下代码.outline0{outline:0;}.outline-none{大纲：无；}大纲：0大纲：无<脚本类型="text/javascript">const$=document.querySelector.bind(document)constprint=console.log.bind(console)constcssProps=["outline-width","outline-style","outline-color"]constslctrs=[".outline0",".outline-none"]slctrs.forEach(slctr=>{styles=window.getComputedStyle($(slctr))cssProps.forEach(cssProp=>{print("%s,%sis%s",slctr,cssProp,styles[cssProp])})})结果：.outline0,outline-widthis0px.outline0,outline-styleisnone.outline0,outline-colorisrgb（0、0、238）。outline-none，outline-width为0px.outline-none，outline-style为none.outline-none，outline-color为rgb(0,0,238)outline仅用于设置单个或多个特定outline属性只是提供了一个更方便的API，所以outline:0和outline:none本质上是一样的。圆角实在做不出来既然有了border-radius，我们可以通过CSS做圆角矩形和圆形等图形，即使box-shadow也受border-radius的影响这样元素的阴影也可以实现圆角的效果。那么轮廓也可以做圆角吗？答案是否定的。那是因为outline的作用就是勾勒出元素所占空间的轮廓。虽然圆角是通过border-radius实现的，但是元素所占的位置空间并没有发生丝毫变化，依然是边缘。角正方形。.round{宽度：100px；高度：100px；背景：黄色；边界半径：50%；轮廓：实心1px红色；仅限于标识当前元素本身所占的位置空间（border-box），但在FireFox下，它包括了后代元素所占的位置空间。.outline{宽度：13px；高度：13px；轮廓：1px纯红色；}