1.  border-width

border-width不支持百分比,类似的还有outline,box-shadow,text-shadow等

border-width支持关键字:thin(1px,最常用),medium(3px,默认值),thick(5px)(IE7除外)

2.  border-style

border-style:solid; 实线

border-style:dashed; 虚线 在chrome和firefox下虚线比较稀疏,而在IE下显得比较密

如果用虚线做图形,由于浏览器兼容的问题,则效果不佳,一般最多只是做个虚框或者是分割线

 border-style:dotted; 点线 在chrome和firefox下是小方,即点为小正方形,在IE下为小圆,即点为小圆形。在IE下可以使用点线来实现圆角。

border-style:double; 双线

计算规则:

1px:0+1+0

2px:1+0+1

3px:1+1+1

4px:1+2+1

5px:2+1+2

6px:2+2+2

7px:2+3+2

......

双线宽度永远相等,中间间隔+-1

双线的兼容性很好,可以用来绘制图形,例如下图,用double属性可以使线分为三部分。

border-style:inset;内凹  基本不用

3. border-color与color

css深入理解之border的更多相关文章

  1. css深入理解之 border

    一 border-width不支持百分比值 1 不符合客观逻辑 2 w3成都一种约定吧 3 边框本身就像是一个包裹内容的界限 类似的还有outline,box-shadow text-shadow均不 ...

  2. CSS深入理解学习笔记之absolute

    1.absolute和float 拥有相同的特性表现: ①包裹性(容器应用之后,可以包裹里面的内容): <!doctype html> <html> <head> ...

  3. [转]图解CSS的padding,margin,border属性(详细介绍及举例说明)

    图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

  4. CSS深入理解之absolute(HTML/CSS)

    absolute和float是同父异母的兄弟,因为它们具有相同点:包裹性与破坏性 absolute的特点 1.独立的,并且可以摆脱overflow的限制,无论是滚动还是隐藏: 2.无依赖,不受rela ...

  5. 图解CSS的padding,margin,border属性(详细介绍及举例说明)

    图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

  6. CSS深入理解之overflow

    CSS深入理解之overflow 前言 这是跟着张鑫旭重学CSS的overflow篇 基本属性 overflow有以下五个基本属性: 1.visible : 默认值,具体表现为,应用此属性后,子元素超 ...

  7. CSS深入理解之line-height

    以下文字整理自慕课网——张鑫旭的<CSS深入理解之line-height>. line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 定义三问: 什 ...

  8. CSS深入理解学习笔记之border

    1.border-width border-width为何不支持百分比:语义和使用场景决定的,现实中各种边框本身的概念就不存在百分比的使用方法. border-width支持关键字:thin.medi ...

  9. 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

    这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...

随机推荐

  1. 阿里云服务器 linux下载 jdk

    直接从本地下载包上传比较慢.直接在服务器上下载安装包: 1.进入orcle官网; 2.选择需要下载的版本,下载需要同意orcle协议, 3.点击下载,获取到下载请求的cookie, 复制所有cooki ...

  2. HDU 1028 整数拆分问题 Ignatius and the Princess III

    Ignatius and the Princess III Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K ...

  3. const用法详解(转)

    http://www.cnblogs.com/StudyRush/archive/2010/10/06/1844690.html 面向对象是C++的重要特性. 但是c++在c的基础上新增加的几点优化也 ...

  4. BZOJ4472 JSOI2015salesman(树形dp)

    相当于选一个包含根的连通块使权值和最大,且每个点的儿子选取数量有限制.那么显然贪心的在所有子树中选比较大的就可以了.至于方案是否唯一只需要看选的子树是否可以替换,注意dp值为0的情况. #includ ...

  5. Codeforces Round #401 (Div. 1) C(set+树状数组)

    题意: 给出一个序列,给出一个k,要求给出一个划分方案,使得连续区间内不同的数不超过k个,问划分的最少区间个数,输出时将k=1~n的答案都输出 比赛的时候想的有点偏,然后写了个nlog^2n的做法,T ...

  6. LA4273 Post Offices

    题目戳这里. 村庄排序.状态\(f[j][i]\)表示考虑前\(i\)个村庄,造\(j\)个邮局且\(i\)造了邮局的最小代价.我们用\(Lb_i,Rb_i\)表示在第\(i\)个村庄造邮局,邮局最左 ...

  7. Website Collection

    前一百个卡特兰数 Candy?的博弈论总结 杜教筛资料 线性基资料 (ex)BSGS资料 斐波那契数列前300项 斯特林数 STL标准库-容器-unordered_set C++ unordered_ ...

  8. vue 时间戳转 YYYY-MM-DD h:m:s

    export default function(data = 1){ let myDate; if(data !== 1){ myDate = new Date(data * 1000); }else ...

  9. HDU 3446 有贪心思想的01背包

    Proud Merchants Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others) ...

  10. Install the Active Directory Administration Tools on Windows Server

    安装 Active Directory 管理工具 To manage your directory from an EC2 Windows instance, you need to install ...