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. oozie中使用sqoop导入hive表时提示hive找不到

    根据出错信息是找不到hive的位置,所以想到的解决方法是: 在sqoop的workflow中添加job-xml,属性写hive-site.xml在hdfs上的位置. (fail) 直接配置一个hive ...

  2. kafka操作清单

    1. 查看topic个数 ./kafka-topics.,dwtest-data3:,dwtest-data4: 2. 查看topic的生产者与消费者消息 ./kafka-topics.,dwtest ...

  3. Python 爬验证码

    主要实现功能: - 登陆网页 - 动态等待网页载入 - 验证码下载 非常早就有一个想法,就是自己主动依照脚本运行一个功能.节省大量的人力--个人比較懒.花了几天写了写,本着想完成验证码的识别,从根本上 ...

  4. iOS错误整理--自定义按钮，给按钮内部赋值出现的错误

    一.练习中为了实现自定义按钮,按钮中的imageView和titleLabel默认是左右排列的.在练习中自定义为上下排列. *在以下方法中重新布局按钮中的子控件 - (void)layoutSubvi ...

  5. R语言低级绘图函数-title

    title 函数用来在一张图表上添加标题 基本用法: main 表示主标题,通常位于图像的上方, sub 表示副标题,位于图像的下方, xlab 表示x轴的标签,ylab 表示y轴的标签 par(om ...

  6. Linux(Ubuntu)下搭建ASP.NET Core环境

    今天来学习一下ASP.NET Core 运行在Ubuntu中.无需安装mono . 环境 Ubuntu 14.04.4 LTS 服务器版 全新安装系统. 下载地址:http://mirrors.neu ...

  7. 在 SharePoint 2010 打开网页出错时，显示实际的错误信息

    每次打开错误页面时,SharePoint出错显示的都是友好信息“发生意外错误”,而且友好到您基本上无法明白到底出什么错,怎么办? 修改Web.config文件配置就可以了,就可以显示更详细的信息: 1 ...

  8. MathType编辑指数的方法

    利用MathType编辑公式使得在文档中编辑理工类的论文工作减轻了不少,它所包含的符号与模板基本都可以满足我们日常工作学习中对公式的需要.在文档中编辑数学物理符号或者是函数表达式,都是用word公式编 ...

  9. ChemDraw中如何输入化学式分隔点

    ChemDraw最实用的化学结构绘图软件,在绘制化学结构时,离不开给化学结构标记原子名称,有时还需要插入分隔点,本教程以下图给出的化学结构为例,讲解ChemDraw中如何输入化学式分隔点.  化学结构 ...

  10. NodeJs生成SVG图形验证码

    背景:短信接口有调用限制,如果受到恶意攻击,很容易就爆掉,所以需要一系列验证机制,后端采用签名加密的方式,而前端要做人机识别,有两个要求: 1)不能使用文本式的验证码,很简单就能拿到 2)所有验证逻辑 ...