outline 和 border的区别：

　　outline不占据文档空间，border占据文档空间。

　　outline无法单独设置上下左右，只要设置outline，必须所有的边都设置；border可以设置任意一个方向时候有border。

outline的兼容性问题：

　　IE8一下不支持outline。

由于outline不占据文档空间的特性，在很多情况下很好用。但它最大的限制就是无法单独设置某个方向的边。并且存在兼容性问题。

outline的兼容性及使用限制的更多相关文章

  1. 移动端 几个css3属性的练习

    转行做前端,上班有一个星期了,什么都不懂,今天学习了几个新的css3属性,记录下来. 注:所有的测试均是在chrome上手机模式测试,与真实的手机环境可能有误差 1:-webkit-tap-heigh ...

  2. 浏览器兼容性问题——IE不支持却很实用的CSS属性Outline和Child

    1. Outline(适用范围:鼠标悬浮hover加外边框) 我们在布局的时候,常常会因为添加边框border影响宽高的布局. 那么,outline是完美的替代品,因为它可以在不影响文档流的情况下呈现 ...

  3. 利用CSS3实现圆角的outline效果的教程

    一.首先,outline是个很牛的东西1. border近亲outline和border是近亲,为什么这么讲呢?首先,都是给元素外面套框框的:其次,支持的属性值几乎都是一样的,例如,outline-s ...

  4. 浏览器兼容性之Css篇

    本文与上一篇随笔<浏览器兼容性之Javascript篇>有一定关联,下来我会继续不断总结,旨在解决浏览器兼容性,对遇到类似问题的同仁有所帮助,如有更多解决浏览器兼容性的案例还望大家分享一起 ...

  5. IE11的CSS兼容性问题

    最近测试给了我一大堆BUG,一瞅发现全是IE11的.吐槽一下这个浏览器真的比较特立独行.很多默认的样式跟别的浏览器不同,而且最明显的一点应该是padding左右内边距往往比别的浏览器大了一倍.但是当需 ...

  6. 对浏览器css兼容性的学习理解及问题解决汇总

    一.从浏览器内核的角度 来看,浏览器兼容性问题可分为以下三类: 1. 渲染相关:和样式相关的问题,即体现在布局效果上的问题. 2. 脚本相关:和脚本相关的问题,包括JavaScript和DOM.BOM ...

  7. CSS如何实现圆角的outline效果？

    一.首先,outline是个很牛逼的东西 温故而知鑫,10年的时候写过一篇可用性方面的文章:“页面可用性之outline轮廓外框的一些研究”,还算挺有用的:3年之后,也就是13年,介绍了个没什么使用价 ...

  8. 【web前端开发】浏览器兼容性处理

    1.居中问题div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto;2.高度问题两上下排列或嵌套的div,上面的div设置高度(height),如果div里的 ...

  9. css之outline实现圆角效果

    对,你没有看错,outline也可以实现圆角,不过请先读完自然会知道结果: ============================================================== ...

随机推荐

  1. Android——适配器其他组件（AutoCompleteTextView：自动完成文本编辑框；Spinner:下拉列表）

    activity_activitywenben.xml <?xml version="1.0" encoding="utf-8"?> <Lin ...

  2. win10设置删除文件提示框

    显示桌面,找到回收站   点击鼠标右键,点击“属性菜单”   勾选“显示删除对话框”   点击“应用”,点击“确定”.   测试一下吧,从电脑删除del删除一个文件.如下图所示,弹出了提示框.

  3. IE文字重复显示的处理

    <body> <div id="container"> <!-- // 页头 --> <div id="header" ...

  4. Android解决下拉刷新控件SwipeRefreshLayout和ViewPager的滑动冲突

    直接说明下我自己项目中的情况,如图: 外部嵌套任何一种refresh下拉控件之后,上方的viewpager左右滑动事件都受到影响,滑动不流畅,稍微有点向下的趋势就会触发刷新. 起初以为可能跟不同下拉控 ...

  5. js匹配浏览器类型，收藏下

    <script type="text/javascript">/** 智能机浏览器版本信息:**/  varbrowser={    versions:function ...

  6. mysql -- 重装mysql失败的解决办法

    最近遇到一些问题,将mysql卸载了重装,但总是出现安装不成功,应该是上一个mysql没卸载干净,于是各种找资料,前后弄了几个小时,终于给弄出来了,结合网上的资料,现总结如下: 1. 打开控制面板-添 ...

  7. 剑指offer_面试题5_从尾到头打印链表（栈和递归实现）

    题目:输入一个链表的头结点,从尾到头反过来打印出每一个节点的值 考察 单链表操作.栈.递归等概念. 理解:要实现单链表的输出,那么就须要遍历.遍历的顺序是从头到尾.而节点输出的顺序是从尾到头.因此,先 ...

  8. Qt的窗口的最大化。

    1.window.showFullScreen()//此方法只对顶级窗口有效,对子窗口无效 QT中窗口部件QWidget成员函数showFullScreen();是用于将窗口部件全屏显示,但是他只对窗 ...

  9. 关于对afx_msg的解释-----来源百度百科

    1AFX前缀 Afx前缀是微软MFC一个小组的名称简写,并没有别的意义. MFC的很多代码,包括全局函数名.宏.头文件名都使用了"Afx". Afx*.h是一组MFC的核心头文件, ...

  10. js实现密码强度

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...