CSS魔法堂:那个被我们忽略的outline 1
前言
在CSS魔法堂:改变单选框颜色就这么吹毛求疵!中我们要模拟原生单选框通过Tab
键获得焦点的效果,这里涉及到一个常常被忽略的属性——outline
,由于之前对其印象确实有些模糊,于是本文打算对其进行稍微深入的研究^_^
Spec是这样描述它的
作用
用于创建可视对象的轮廓(元素的border-box),如表单按钮轮廓等。
与border不同
- outline不占文档空间;
- outline不一定是矩形。
具体属性说明
/* 轮廓线颜色 * invert表示为颜色反转,即使轮廓在不同的背景颜色中都可见 */
outline-color: invert | <color_name> | <hex_number> | <rgb_number> | inherit
/* 轮廓线样式 */
outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
/* 轮廓线宽度 */
outline-width: medium | thin | thick | <length> | inherit
/* 一次性设置轮廓线的颜色、样式 和 宽度 */
outline: <outline-color> <outline-style> <outline-width>;
/* 轮廓线的偏移量,大于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下执行如下代码
<style type="text/css">.outline0{outline: 0;}.outline-none{outline: none;}
</style>
<a href="#" class="outline0">outline: 0</a>
<a href="#" class="outline-none">outline: none</a>
<script type="text/javascript">const $ = document.querySelector.bind(document)const print = console.log.bind(console)const cssProps = ["outline-width", "outline-style", "outline-color"]const slctrs = [".outline0", ".outline-none"]slctrs.forEach(slctr => {styles = window.getComputedStyle($(slctr))cssProps.forEach(cssProp => {print("%s, %s is %s", slctr, cssProp, styles[cssProp])})})
</script>
结果:
.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
虽然实现了图形视觉上的圆角,但该元素所占位置空间一点都没有变化,还是那个有棱有角的方形。
<style type="text/css">.round{width: 100px;height: 100px;background: yellow;border-radius: 50%;outline: solid 1px red;}
</style>
轮廓的差异
在Chrome下outline
仅限于标识当前元素自身所占的位置空间(border-box),但在FireFox下则包含子孙元素所占的位置空间。
<style type="text/css">.outline{width: 13px;height: 13px;outline: 1px solid red;}
</style>
<div class="outline"></div>
<script type="text/javascript">const el = document.querySelector(".outline")el.textContent = !!~navigator.appVersion.indexOf("Chrome") ? "Chrome" : "FireFox"
</script>
总结
尊重原创,转载请注明来自:https://www.cnblogs.com/fsjoh... ^_^肥仔John
参考
https://www.xuebuyuan.com/757...
https://www.zhangxinxu.com/wo...
CSS魔法堂:那个被我们忽略的outline 1相关推荐
- CSS魔法堂:那个被我们忽略的outline
前言 在CSS魔法堂:改变单选框颜色就这么吹毛求疵!中我们要模拟原生单选框通过Tab键获得焦点的效果,这里涉及到一个常常被忽略的属性--outline,由于之前对其印象确实有些模糊,于是本文打算对其 ...
- CSS魔法堂:更丰富的前端动效by CSS Animation
前言 在<CSS魔法堂:Transition就这么好玩>中我们了解到对于简单的补间动画,我们可以通过transition实现.那到底多简单的动画适合用transtion来实现呢?答案就是 ...
- CSS魔法堂:你一定误解过的Normal flow
前言 刚接触CSS时经常听到看到一个词"文档流",那到底什么是"文档流"呢?然后会看到"绝对定位和浮动定位能脱离文档流",从这句可以看到文 ...
- CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins
前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...
- CSS魔法堂:重拾Border之——图片作边框
前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
- CSS魔法堂:重拾Border之——更广阔的遐想
前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
- CSS魔法堂:说说Float那个被埋没的志向
前言 定位系统中第一难理解就是Normal flow,而第二就非Float莫属了,而Float难理解的原因有俩,1. 一开头我们就用错了:2. 它跟Normal flow靠得太近了.本文尝试理清Fl ...
- CSS魔法堂:深入理解line-height和vertical-align
前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vertical-align基情四射,贵圈真乱啊 ...
- CSS魔法堂:hasLayout原来是这样!
前言 过去一直听说旧版本IE下很多诡异bug均由一个神秘角色引起的,那就是hasLayout.趁着最近突然发神经打算好好学习CSS,顺便解答多年来的疑惑. hasLayout到底是何方神圣? hasL ...
最新文章
- linux vim编辑器主要作用,Linux-vim编辑器
- basename函数使用
- 11.Windows线程切换_线程优先级
- 模型学习 - RNN及一系列发展
- 精武风云全线公映,挂马欺诈网站同步上线
- java中得到classpath和当前类的绝对路径的一些方法(路径中的%20进行替换空格)...
- laravel-admin 在指定的相册下添加照片
- ci php redis,一次基于CI的Redis性能问题定位
- 压缩JS方法:uglifyjs
- git学习指南_GIT 学习指南
- 就我不坑2 nyoj(简单模拟)
- springcloud之config配置中心
- windows函数入口问题 UNREFERENCED_PARAMETER的用处 _tWinMain与wWinMain又有什么区别
- 关于 tp5 事务操作总结
- android 著名播放器,十二大最著名的Android播放器开源项目
- ABAQUS的第一个error【删去Job-1.lck】
- BZOJ 2794 [Poi2012]Cloakroom(离线+背包)
- Taro 如何开始微信小程序的开发
- EduCoder-Web程序设计基础 -web编程训练-html5-文档头部-第1关:页面标题及字符集的设置
- 【agora】 Agora Media SDK : aut transport
热门文章
- mcq 队列_MCQ | 软件生命周期模型
- ajax 如何禁止 预检请求,如何跳过“选项”预检请求?
- mysql 锁 代码_MySQL中的锁实例
- mfc在运行的时候为什么没有实例化_为什么不建议把数据库部署在Docker容器内?...
- hdu5446——Unknown Treasure
- 通用Makefile实现
- 校门外的树——树状数组+区间修改
- select函数(一)
- 信号 09 | SIGCLD语义
- Python内置数据类型之Tuple