border:

border-width:1px;

border-style:solid;

border-color:#ccc;

可以简写为：border:1ox solid #ccc;

outline:

outline-width:1px;

outline-style:solid;

outline-color:#ccc;

可以简写为：outline:1ox solid #ccc;

2者的用法相似，但是border是会占据盒子模型的大小，而outline是一个轮廓，不会占据盒子模型的大小。

CSS中border和outline的区别的更多相关文章

  1. css中border画三角形

    <!doctype html><html lang="en"> <head>  <meta charset="UTF-8&quo ...

  2. CSS中rem、em的区别

    引用文档:http://www.divcss5.com/html/h529.shtml:http://blog.csdn.net/qq_35432904/article/details/5180422 ...

  3. CSS中的class与id区别及用法

    转自http://www.divcss5.com/rumen/r3.shtml及http://www.jb51.net/css/35927.html 我们平常在用DIV CSS制作Xhtml网页页面时 ...

  4. CSS中margin和padding的区别

    在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...

  5. css中margin-left与left的区别

    研究下拉菜单和弹出菜单时比较所得: 1.直接在css中设置left生效的前提是必须设置父容器position:absolute或relative,如果不设置则会显示为最近一个定位的父对象左边相关的位置 ...

  6. CSS中link与import的区别

    一.import的用法 1,在html文件中 <style type="text/css"> @import url(http://www.dreamdu.com/st ...

  7. border和outline的区别

    如果有一个需求,给一个元素增加一条边框,想必大家会习惯且娴熟的使用border来实现,我也是这样   但其实outline也能达到同样的效果,并且在有些场景下会更适用,比如下面的demo 使用bord ...

  8. 外部引用CSS中 link与@import的区别

    差别1:link属于XHTML标签,而@import完全是CSS提供的一种方式. link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加 ...

  9. css中border制作各种形状

    css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度 ...

随机推荐

  1. 重读redis设计与实现

    重读了一遍redis设计与实现,这次收获也不错,把之前还有些疑惑的点:redis跳跃表的原理.redis持久化的方法.redis复制.redis sentinel.redis集群等,都重新熟悉了一遍, ...

  2. IE8 下更改input[file] file文件选择框样式

    1/使用绝对定位,将文件选择框固定,并且隐藏该选择框(文件选择框可调整宽高),设置该文件选择框 z-index 调高 比如 999. 2/使用任意标签,调整为与上面选择框相同宽高,目的为使用该标签样式 ...

  3. HTTP缓存及其合理使用

    以前以为HTTP缓存是个简单的事,项目中遇到后才发觉关于缓存实践有挺深的学问. from几篇文章详见: 使用 HTTP 缓存:Etag, Last-Modified 与 Cache-Control 合 ...

  4. 在WSL中使用Window10中的virtualenv环境

    1.进入WSL的终端 2.创建env.sh脚本,内容如下: export WORKON_HOME=你环境的总目录if [ ! -d "$WORKON_HOME/$1/" ];the ...

  5. 消息中间件系列二：RabbitMQ入门（基本概念、RabbitMQ的安装和运行）

    一.基本概念 1. AMQP AMQP,即Advanced Message Queuing Protocol,一个提供统一消息服务的应用层标准高级消息队列协议.支持不同语言和不同的产品 2. 生产者 ...

  6. 自定义GridView实现分割线解析

    前两天在些项目的时候碰到常用的GridView要实现一些分割线,之前就是用本方法利用listView和Item的背景颜色的不同线显示分割线.这是最low的一种做法.于是我就简单的写了一个自定义的 Gr ...

  7. Idea2018旗舰版破解方法

    完整请参考 https://www.jianshu.com/p/3c87487e7121 1.在hosts文件里添加一行: 0.0.0.0 account.jetbrains.com 2.在Activ ...

  8. Jquery EasyUI Combotree和 EasyUI tree展开所有父节点和获取完整路径

    Jquery EasyUI Combotree展开所有父节点 Jquery EasyUI Combotree获取树完整路径 Jquery EasyUI tree展开所有父节点 Jquery EasyU ...

  9. Java基础学习心得笔记

    对于很多只会C语言的初学者而言,面对java基础语法学习,反而感觉很难,其实其中最大的问题不是语法难,而是一种编程思想的转变.面向过程就是把你的代码封装成函数,然后依次去做一件事情,面向过程是把你要做 ...

  10. [原]eclipse + pydev :Error in sitecustomize; set PYTHONVERBOSE for tracaeback: KeyError: 'sitecustomize'

    问题点: 安装 eclipse + pydev的时候出现 Error in sitecustomize; set PYTHONVERBOSE for tracaeback: KeyError: 'si ...