outline使用方法,outline与border的区别
在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候,该元素将会被一个轮廓虚线框围绕。这个轮廓虚线框就是 outline 。
outline 能告诉用户那一个可以激发事件的html元素获取了焦点,对钟爱键盘操作的用户尤其有意义。一个清晰悦目的outline设计能提高使用表单的用户体验。 另一方面,outline 也有些讨厌的地方,比如使用CSS设计的Tab(标签页)时,选择一个Tab之后,Tab上的轮廓虚线会一直显示,有些影响美观。
CSS 的 outline 属性允许我们改变这个默认的轮廓虚线框效果。其配套的相关属性包括:
outline
outline-width
outline-style
outline-color
outline-offset
其中第一个 outline 是速写(shorthand)形式,格式为: outline: outline-color || outline-style || outline-width
如果想让链接获取到焦点时更醒目,可以设置轮廓线条为红色,outline 属性的设计可能如下:
a { outline-color: red; }
而如果想去掉影响美观的Tab上的轮廓线条,outline属性可如下设置:
.active-tab { outline: none; ...... /* other properties */}
outline in browsers
直到最新的IE7 beta2,MS的IE还不支持 outline CSS属性,不过IE为HTML元素扩展了一个 hideFoucs 属性,所有能获得焦点的元素如果添加 hideFoucs="true" 属性,那么它们获得焦点时虚线框将被不出现。比如MSDN里的例子:
<button>button with rectangle</button>
<!-- 其实hideFocus="false"同hideFocus="true"一样的效果,IE只要发现存在hideFocus属性即生效,这样写是为了兼 容XHTML的属性必须有值的规范 -->
<button hideFocus="true">tton without rectangle</button>
Firefox1.5提供了全面的outline支持。早期的Firefox 1.0.x 版本据说可以使用Mozilla的独有扩展 -moz-outline,不过我想现在几乎找不到什么不升级到Firefox 1.5的理由了。 另外Opera9 beta似乎还不支持。
更多浏览器支持信息可以从QuirksMode 找到。
outline 与 border 的区别
border 可应用于几乎所有有形的html元素,而 outline 是针对链接、表单控件和ImageMap等元素设计。从而另一个区别也可以推理出,那就是: outline 的效果将随元素的 focus 而自动出现,相应的由 blur 而自动消失。这些都是浏览器的默认行为,无需JavaScript配合CSS来控制。
另外从 CSS的十八般技巧 一文中还读到的一个区别就是: outline 不会象border那样影响元素的尺寸或者位置。
去除焦点虚线:
style="outline:medium none;" hidefocus="true"
原文出处:https://my.oschina.net/guomingliang/blog/337169
outline使用方法,outline与border的区别相关推荐
- 实现java的outline功能_outline使用方法,outline与border的区别
在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候,该元素将会被一个轮廓虚线框围绕.这个轮廓虚线框就是 outline . outline 能告诉用户那一个可以激发事件的h ...
- CSS轮廓(outline)属性详解及 outline 与 border 的区别
轮廓(outline) 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. 在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候,该元 ...
- 【CSS】outline(轮廓)与border(边框)的区别
在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候,该元素将会被一个轮廓虚线框围绕.这个轮廓虚线框就是 outline . outline 能告诉用户那一个可以激发事件的h ...
- outline与border的区别
在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候,该元素将会被一个轮廓虚线框围绕.这个轮廓虚线框就是 outline . outline 能告诉用户那一个可以激发事件的h ...
- 【转】Oracle Outline使用方法及注意事项
概要 Oracle Outline是用来保持SQL运行计划(execution plan)的一个工具. 我们能够通过outline工具防止SQL运行计划在 数据库环境变更(如统计信息,部分參数等)而 ...
- css中outline,css中outline的解析(附示例)
本篇文章给大家带来的内容是关于css中outline的解析(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在css改变单选框颜色的方法实现中我们要模拟原生单选框通过Tab键 ...
- 辅助方法 @Html.Raw与 HtmlString区别
辅助方法 @Html.Raw与 HtmlString区别 //Html.Raw其实是调用 new Microsoft.AspNetCore.Html.HtmlString(xxx)@{ViewData ...
- Scanner方法中nextLine()和next()区别
Scanner方法中nextLine()和next()区别 next()不接受空格回车,并且将空格,回车作为终止符号 nextLine()接受空格,回车
- JAVA中的方法和构造方法有什么区别
JAVA中的方法和构造方法有什么区别 1.方法有返回类型,方法名小写,不能和类名相同:构造方法没有返回类型,void也不行,名与类名相同. 2.构造方法是初始化对象的重要途径,所以就算你给一个类没有定 ...
最新文章
- python基础知识练习题
- Shell:字符串操作
- “万能钥匙”可以打开大脑:脑刺激个性化医疗的新领域
- linux tar打包、压缩、解压到指定目录
- 在控制台输出口,根据内存地址,找到被过度释放的对象!
- VTK:图片之ImageTransparency
- uniGUI试用笔记(一)
- 使用单独的解决方案(类库)来开发DNN的模块-C#版本(2)
- AttributeError: module ‘tensorflow.python.layers.base‘ has no attribute ‘Node‘
- 蓝桥杯2011--2--歌赛新规则
- java 背单词系统_基于Java的智能背单词自测系统(含源文件).doc
- 黑链 明链 暗链 简介
- Intellij IDEA 设置字体加粗
- 04 高等数学专题——向量代数和空间解析几何
- 蓝筹股连环爆雷!这些蓝筹股哪些最容易爆雷?(最全名单)
- AcWing 350. 巡逻(Kru)
- 用户帐户控制组策略和注册表项设置
- 《CSS揭秘》实用技巧总结
- IDEA Maven下载依赖时报错: ERROR - #org.jetbrains.idea.maven - Cannot reconnect.
- 3.27 期货每日早盘操作建议