CSS魔法堂：那个被我们忽略的outline

Rocko 发布于2019-08-29 16:54 / 2810人阅读

摘要：真心没法弄出圆角自从有了后，我们就可以通过制作圆角矩形圆形等图形，甚至连也受到影响从而实现元素阴影也能做到圆角的效果。那么是否也能做出圆角的效果呢答案是否定的。

前言

在CSS魔法堂：改变单选框颜色就这么吹毛求疵！中我们要模拟原生单选框通过Tab键获得焦点的效果，这里涉及到一个常常被忽略的属性——outline，由于之前对其印象确实有些模糊，于是本文打算对其进行稍微深入的研究^_^

Spec是这样描述它的 作用

用于创建可视对象的轮廓(元素的border-box)，如表单按钮轮廓等。

与border不同

outline不占文档空间；

outline不一定是矩形。

具体属性说明

/* 轮廓线颜色 
 * invert表示为颜色反转，即使轮廓在不同的背景颜色中都可见 
 */
outline-color: invert |  |  |  | inherit
/* 轮廓线样式 */
outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
/* 轮廓线宽度 */
outline-width: medium | thin | thick |  | inherit
/* 一次性设置轮廓线的颜色、样式 和 宽度 */
outline:   ;
/* 轮廓线的偏移量，大于0则轮廓扩大，小于0则轮廓缩小 */
outline-offset: 0px;

魔鬼在细节 兼容性

outline作为CSS2.1规范，因此IE6/7/8(Q)均不支持，在IE8下写入正确的DOCTYPE则支持outline属性。
outline-offset则IE下均不支持。

IE6/7/8(Q)下隐藏outline

若要在IE6/7/8(Q)下隐藏outline效果，则在元素上添加hideFocus特性即可。

outline:0和outline:none的区别

在Chrome下执行如下代码


outline: 0
outline: none

结果：

.outline0, outline-width is 0px
.outline0, outline-style is none
.outline0, outline-color is rgb(0, 0, 238)
.outline-none, outline-width is 0px
.outline-none, outline-style is none
.outline-none, outline-color is rgb(0, 0, 238)

outline仅仅为设置单个或多个具体的outline属性提供更便捷的API而已，因此outline:0和outline:none本质上效果是一致的。

真心没法弄出圆角

自从有了border-radius后，我们就可以通过CSS制作圆角矩形、圆形等图形，甚至连box-shadow也受到border-radius影响从而实现元素阴影也能做到圆角的效果。那么outline是否也能做出圆角的效果呢？答案是否定的。那是因为outline的作用本来就是用于勾勒出元素所占的空间轮廓，通过border-radius虽然实现了图形视觉上的圆角，但该元素所占位置空间一点都没有变化，还是那个有棱有角的方形。

轮廓的差异

在Chrome下outline仅限于标识当前元素自身所占的位置空间（border-box），但在FireFox下则包含子孙元素所占的位置空间。

总结

尊重原创，转载请注明来自：https://www.cnblogs.com/fsjoh... ^_^肥仔John

参考

https://www.xuebuyuan.com/757...
https://www.zhangxinxu.com/wo...

GPU云服务器云服务器忽略css特性 php忽略警告的设置创造与魔法云鸟便宜的服务器创造与魔法所有服务器的云鸟在哪

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113972.html

CSS魔法堂：改变单选框颜色就这么吹毛求疵！

摘要：前言是否曾经被业务提出能改改这个单选框的颜色吧让它和主题颜色搭配一下吧，然后苦于原生不支持换颜色，最后被迫自己手撸一个凑合使用。设置为的样式行为特征单选框的行为特征，明显就是选中与否，及选中状态的改变事件，因此我们必须保持对外提供事件。前言是否曾经被业务提出能改改这个单选框的颜色吧！让它和主题颜色搭配一下吧！，然后苦于原生不支持换颜色，最后被迫自己手撸一个凑合使用。若抛开inpu...

freecode 2019-08-29 16:52 评论0 收藏0
CSS魔法堂：更丰富的前端动效by CSS Animation

摘要：无效生效重复怎么办与规则一样，标准规定相同的关键帧不产生层叠，仅最后出现的认定为有效。但实际上和均将关键帧设计为可层叠的。为默认值，表示动画一结束，动画效果就结束表示动画一开始就马上执行完第一个关键帧的效果。前言在《CSS魔法堂：Transition就这么好玩》中我们了解到对于简单的补间动画，我们可以通过transition实现。那到底多简单的动画适合用transtion来实现呢...

MrZONT 2019-08-30 15:54 评论0 收藏0
CSS魔法堂："那不是bug，是你不懂我!" by inline-block

摘要：那不是，是我不懂而已。的用途之一西文是以空格来分隔单词的，而汉字间则无需空格分隔，但为了统一西文东亚和的排版，于是抽象出一个名为的概念用于分隔词义单元，则作为的值域，而定义域就是语言信息。前言每当来个需要既要水平排版又要设置固定高宽时，我就会想起display:inline-block，还有为了支持IE5.5/6/7的hack*display:inline;*zoom:1;。然后发...

cucumber 2019-08-30 12:56 评论0 收藏0
CSS魔法堂：你一定误解过的Normal flow

摘要：后来终于知道是某位大神将翻译为文档流而已。。。。。。另外单纯设置效果与采用是一样的魔法堂就这个样，而浮动定位也是基于。相对定位的最强武器就是个属性了，好明显它们默认值均是。前言刚接触CSS时经常听到看到一个词文档流，那到底什么是文档流呢？然后会看到绝对定位和浮动定位能脱离文档流，从这句可以看到文档流和绝对定位、浮动定位是同一个范畴的概念，再后来在W3C标准文档找到关于Absolu...

Hancock_Xu 2019-08-30 12:56 评论0 收藏0
CSS魔法堂：小结一下Box Model与Positioning Scheme

摘要：魔法堂重新认识和魔法堂你一定误解过的魔法堂就这个样魔法堂说说那个被埋没的志向深入细节后会发现中定位模式之间，和之间存在千丝万缕的关系，必须以俯瞰的角度捋一下。当采用时，属性的实际值会被重置为。由于和则需要通过来引入来提供盒子定位微调的功能。前言对于Box Model和Positioning Scheme中3种定位模式的细节，已经通过以下几篇文章记录了我对其的理解和思考。《CSS...

szysky 2019-08-30 12:57 评论0 收藏0