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. Sublime text 3 格式化代码 插件

    JsFormat: 重新打开sublime就能使用js格式化插件 使用方法: 1.快捷键:ctrl+alt+f 2.或者先用快捷键打开命令面板 “ctrl + shift + p”, 再输入 “For ...

  2. python class和class(object)用法区别

    # -*- coding: utf-8 -*- # 经典类或者旧试类 class A: pass a = A() # 新式类 class B(object): pass b = B() # pytho ...

  3. 一次xxoo提权

    数据库root权限.然并卵. 看了一下phpinfo得知是mysql 5.0 的 然后想要通过udf之类的提权一波,结果一执行sql语句就被狗拦截了. 然而数据库这条路是GG了 OS 名称: Micr ...

  4. [转]Linux下网络常用命令和工具

    转自:http://int32bit.me/2016/05/04/Linux%E5%B8%B8%E7%94%A8%E7%BD%91%E7%BB%9C%E5%B7%A5%E5%85%B7%E6%80%B ...

  5. JavaScript鼠标拖动div且可调整div大小

    http://www.softwhy.com/article-5502-1.html <!DOCTYPE html> <html> <head> <meta ...

  6. oracle sql 获取本季度所有月份，上季度所有月份

    上季度所有月份: ),-ROWNUM),'YYYYMM') LAST_Q A FROM DUAL) CONNECT ; 本季度所有月份: ),-ROWNUM),'YYYYMM') LAST_Q FRO ...

  7. 在 windows 上安装免安装版的mysql

    在 windows 上安装免安装版的 1. 下载路径 https://downloads.mysql.com/archives/community/ 2. 解压 假设解压后的路径为:E:\Enviro ...

  8. 基于物理规则的渲染(PBR)

    为毛我的效果那么挫,我也是按照公式来的 2017 -3 -20

  9. eclipse如何安裝JPA 和Data Source Explorer

    安裝Data Source Explorer https://blog.csdn.net/XIAOZHI0999/article/details/61199801?utm_source=blogxgw ...

  10. Linux下">/dev/null 2>&1 "相关知识说明

    在学习Linux的过程中,常会看到一些终端命令或者程序中有">/dev/null 2>&1"出现,由于已经遇到了好几次了,为了理解清楚,不妨花点时间百度或者go ...