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. 【WebService】——阶段小结

    [概念] WebService集中解决了远程调用.跨平台和跨语言的问题.如下图中,A应用与B应用之间的相互调用不再局限于平台(Linux或Windows).语言(Java和C#). [与xml] 提到 ...

  2. SSH Secure Shell Client的使用方法

    1:双击其客户端图标,出现下图所示窗体 2:我使用她主要用于发布项目的,所以第一次使用会选择新建一个账户 3:填写账户的名称 4:完善账户的信息 5:主要用填下远程主机的IP/USER/PORT,在需 ...

  3. awk,rsync,重启,maxdepth一层目录,登录,开机自启动

    有100个日志文件,每个文件大约1G,每条日志都以 “H:i:s” 的时间格式开头,如: 05:02:04 xxx yyy zzz 因为是日志文件,所以肯定以时间为顺序的,现在可以确定的是,在某个文件 ...

  4. Aspose.words 替换字符 操作

    var path = Server.MapPath("~/doc/demo.doc"); Document doc = new Document(path); DocumentBu ...

  5. 【题解】HAOI2012高速公路

    一节政治课的结果……推式子+推式子+推式子…… 首先注意到一个区间里面,选择(x, y)和(y, x)的费用是一样的.所以我们把这两种情况合为一种,那么现在询问的区间为(l, r),则一共的情况就有 ...

  6. [bzoj1062] [NOI2008]糖果雨

    Description 有一个美丽的童话:在天空的尽头有一个" 糖果国" ,这里大到摩天大厦,小到小花小草都是用糖果建造而成的.更加神奇的是,天空中飘满了五颜六色的糖果云,很快糖果 ...

  7. 【ZJ选讲·画山】

    给出一张纸(N × M),你要在上面画山,但不能画出界(N,M<=100) Like this: 起点为(0,0),终点为(N,0) 给出w种线段画法(x,y),表示用了这种画法后,笔迹末 ...

  8. HTTP请求中同步与异步有什么不同

    普通的B/S模式就是同步,而AJAX技术就是异步,当然XMLHttpReques有同步的选项. 同步:提交请求->等待服务器处理->处理完毕返回.这个期间客户端浏览器不能干任何事. 异步: ...

  9. 从零开始学习MXnet(四)计算图和粗细粒度以及自动求导

    这篇其实跟使用MXnet的关系不大,但对于我们理解深度学习的框架设计还是很有帮助的. 首先还是对promgramming models的一个简单介绍,这个东西实际上是在编译里面经常出现的东西,我们在编 ...

  10. POJ1456:Supermarket(并查集+贪心)

    Supermarket Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 17634   Accepted: 7920 题目链接 ...