css中outline的使用

CSS中outline属性是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

例如：在浏览器里，当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候，该元素将会被一个轮廓虚线框围绕。这个轮廓虚线框就是outline 。

一、outline可以按顺序设置如下属性

outline-color ：设置元素轮廓的颜色，其取值与border-color类似。只有当outline-style不为none时才有效。默认为transparent。

outline-style ：设置元素轮廓的格式，其取值与border-style类似，但没有hidden值。默认为none，无轮廓。

outline-width：设置元素轮廓的宽度，其取值与border-width类似。只有当outline-style不为none时才有效。

如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的

二、outline的层级顺序

1、outline在不同的格式化上下文呈现是不一样的，在块级元素里面是可以覆盖上下两边的内容的。在内联元素之可以覆盖上面的内容。

2、通常情况下outline会按照后面覆盖前面的顺序正常显示（同等情况下，如同在文档流里面都没有浮动，或者都是浮动，定位的有z-index不算）

3、如果页面有浮动元素，则先显示浮动元素的outline，再显示正常文档流的outline（浮动元素的outline被没有浮动元素的outline覆盖）

4、如果页面有定位元素（relative，absolute，fixed不包括static），则在显示浮动元素之后，显示正常的文档流，之后再显示定位的元素（不设置z-index情况下，设置的话等于浏览器又执行了其他命令），当然定位的元素可以用z-index属性把元素在前后挪来挪去，不过现在讨论的是在不设置z-index下默认浏览器对outline的显示情况。

5、其实outline大部分都不会像border那样用，outline的作用上面也说了，只是浏览器默认的那条小小的虚线而已，一般还要消除掉的。比如outline:none。

文章转载自： css中outline http://www.studyofnet.com/news/995.html

css中outline的使用相关推荐

css中outline,css中outline的解析（附示例）
本篇文章给大家带来的内容是关于css中outline的解析(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在css改变单选框颜色的方法实现中我们要模拟原生单选框通过Tab键 ...
css中outline
本文导读:outline这个属性平时用的不太多,css中outline的作用表示在元素边框边缘的外围绘制一条包围元素的线,包括outline-color.outline-style.outline-w ...
html中outline属性,css的outline属性的作用是什么
css的outline属性的作用是什么发布时间:2020-05-06 11:47:34 来源:亿速云阅读:280 作者:小新 css的outline属性的作用是什么?相信有很多人都不太了解,今天小 ...
html中outline属性,css 轮廓（outline）属性是如何使用的
一.什么是css轮廓(outline)属性轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. 举个例子来说吧:在我们平时阅读浏览器里的内容时,当鼠标点击让一个 ...
css中hideFocus的用法
css中hideFocus的用法简单说:hideFocus是对超链接外虚线框的设定! hideFocus即隐藏聚焦,具有使对象聚焦失效的功能,其功能相当于: onFocus="this.b ...
html中div不在火狐居中,Firefox嵌套CSS中div标签居中问题解决方法
本文和大家重点讨论一下Firefox嵌套CSS中div标签的居中问题的解决方法,主要包括使用line-height垂直居中,清除容器浮动,不让链接折行,始终让Firefox显示滚动条等内容. Fire ...
css button 四种状态,css中按钮的四种状态
css中按钮有四种状态普通状态 hover 鼠标悬停状态 active 点击状态 focus 取得焦点状态 .btn:focus{outline:0;} 可以去除按钮或a标签点击后的蓝色边框下面的 ...
我可以在CSS中使用onclick效果吗？
本文翻译自:Can I have an onclick effect in CSS? I have an image element that I want to change on click. 我 ...
html怎么设置img样式,css默认样式 css中img默认样式问题
css a标签去掉默认样式是什么? 以下为css a标签去掉默认样式: a { text-decoration:none out-line: nonecolor: #*****;} 层叠样式表(英文全 ...

css中outline的使用

css中outline的使用相关推荐

最新文章

热门文章