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. 嘿, 你知道吗, 再也不需要for循环了!

    做一个优雅的程序员 JavaScript是一门优雅的语言, 这个'优雅'体验在JS逻辑层次处于高段位的水平, 什么意思呢, 就是一个js应用的主线剧情一定全部是函数式表达的高层可读逻辑, 还是不懂? ...

  2. link_to和其对应要跳转的的url，用path和直接路由方法

    link_to和其对应要跳转的的url,用path和直接路由方法 看看link_to <% @order.each do |oo| %> <div> <%= oo.nam ...

  3. css鼠标移动到文字上怎样变化背景颜色

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 几种常见的DIV边框样式

    <html> <head> <title>边框样式</title> </head> <body> <p style=bor ...

  5. 关于Cocos2d-x手机上运行游戏的时候屏幕横屏改竖屏的解决方案

    cocos2d-x打包的时候默认是横屏,如果要改成竖屏,步骤如下: 1.打开项目 2.打开proj.android 3.编辑AndroidManifest.xml 4. 找到这一句android:sc ...

  6. C++泛型和算法

    看书的速度终于慢了下来,倒不是难于理解,而是需要理解的东西有点多. 先吐槽下C++Primer这本书,不少地方都是用抽象的语言进行介绍! 拜托,你这是介绍,不是总结! 像容器适配器那里: “本质上,适 ...

  7. e659. 缩放，剪取，移动，翻转图形

    AffineTransform tx = new AffineTransform(); tx.scale(scalex, scaley); tx.shear(shiftx, shifty); tx.t ...

  8. Hello World! 这是我的第一个 CGI 程序

    Hello World! 这是我的第一个 CGI 程序上面的 C++ 程序是一个简单的程序,把它的输出写在 STDOUT 文件上,即显示在屏幕上.在这里,值得注意一点,第一行输出 Content-ty ...

  9. (转)MFC的ClistCtrl删除选中多行项目

    MFC的ClistCtrl控件添加了多行数据后,若要删除选中的多行数据,可以使用ClistCtrl的成员函数,在网上找了很多例子,发现都有问题,因为在删除ClistCtrl行的时候,删除行下面的行会上 ...

  10. CleanMyMac 4破解版-最强中文版_破解版_激活码_注册码

    最新版CleanMyMac 4中文版本已经发布了,也受到了广大用户的喜爱.众所周知, 注册码是开启软件的钥匙,在获取软件安装包之后需要有效的注册码才能激活软件.但是关于CleanMyMac 4注册码的 ...