border边框的宽度/样式/颜色 全部值

时间:2022-12-09 11:39:03

border

  1. 用emmet写border的时候, 缩写是:bd. 不是b, 也不是bdr: b会扩展成bottom, bdr 会扩展成 border-right,

  2. border的宽度: 1px 基本上== thin, 很细的

  3. border的全部样式一次性写完的固定写法是:
    border: 宽度width + 样式style + 颜色color

  4. border属性中最重要的属性是 border-style: 是边框的样式, 因为 border-style的默认值是 :none. 是没有边框.

border 几个属性的默认值 是: border-width: medium, 大概2, 3个px. border-color: #000 是黑色. 而border-style不是没有默认值, 而是它的默认值是 border-style: none ,或者说是 border-style:0 所以如果你不指定 border-style的时候, 也是你不写border-style的时候, 是没有边框的!!

所以border样式属性的值, 你可以不写 width, 不写color, 但是一定要写 style.

border的属性值排序 正规的是按上面的那个 顺序, 但是如果你不按那个标准 顺序写, 也是可以 正确解析的..., 甚至你省略写, 只写某一个属性值, 都可以, 因为parser 是能够 区分: 颜色, 样式, 宽度的: 

颜色: 要么用#开头, 要么是那几个固定的颜色单词,
样式: 也是固定的表示样式的单词, 如solid dotted dash inset outset ridge...
宽度: 要么是数字1, 2px,,, 要么是表示宽度的那几个单词.
所以, 不管你按什么顺序写, css解析器都是能够正确识别的, 只要你单词写正确, 格式写正确, 正确的用空格分隔就好了
比如: 下面的border顺序就完全是 随意的, 同样能够正确识别/生效:

border边框的宽度/样式/颜色 全部值

border边框的宽度/样式/颜色 全部值

更正一下, 以前说 inset, outset等边框, 只有右下角的边框才会显式 设置的颜色, 而坐上角的边框总是黑色, 这个是 错误的, 正确的说法是: 所有的边框, 都会正确的显式设置的颜色, 即使在 (inset(这个样式是最常用的...), outset)等特殊样式下. 只是你没有看 清楚 而已...

border的emmet写法, 由于bd后面 的内容, 可能是用单词 来 表达颜色, 宽度, 样式的, 所以, 如果用bd同时加上这些单词的缩写的话, emmet是认不到属性名是border的. 所以 两种方法解决问题: 要么你先 只写bd, 展开后, 然后 再写具体的值; 要么, 你用数字表示宽度的 紧跟在bd后面 (bd后只能是 数字, ba后只能是数字, 跟单词/字母都不行, 都不能被识别). 同时加上 连字符, [比较特殊的是 如果数字后面是用# 表示 的颜色分隔符, 可以不用连字符分割]

凡是一个style属性 有多个属性值的情况, 不只是 margin的四个属性值m10-20-30-40需要用连字符, 凡是一个属性名称后, 有多个属性值需要规定的, 都应该用连字符, 如border , background...

================================================ ==
几个参考文章:

http://www.cnblogs.com/java-my-life/archive/2012/08/06/2625065.html

http://www.w3school.com.cn/js/js_datatypes.asp

http://www.w3school.com.cn/js/js_datatypes.asp

http://www.cnblogs.com/web-sheena/archive/2012/06/25/2560868.html

border边框的宽度/样式/颜色 全部值的更多相关文章

  1. 边框(border)宽度样式颜色 和基本属性

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

  2. border——边框属性

    一.第一层次(复合样式) <style> p.one{border:1px solid black;} /*边框:1像素 实心的 黑色:*/ </style> <body ...

  3. css border-bottom(指定下边线的样式、宽度及颜色)

    border-bottom(指定下边线的样式.宽度及颜色) border-bottom: 值: border-bottom-style:值; border-bottom-color: 值; borde ...

  4. border边框属性

    边框属性: 边框宽度(border-width):thin.medium.thick.长度值 边框颜色(border-color):颜色.transparent(透明) 边框样式(border-sty ...

  5. CSS border边框属性教程&lpar;color style&rpar;

    CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...

  6. CSS边框及常用样式

    一.CSS设置样式 1.1 边框border 作用:设置标签周围的边框,方法  board:宽度 样式 颜色,一般情况下样式使用 solid实体的,和dotted虚线的 <head> &l ...

  7. CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  8. DIV&plus;CSS颜色边框背景等样式

    1.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<常用css缩写语法总结>,css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两 ...

  9. padding&lpar;内边框&rpar;&comma; border&lpar;边框&rpar;&comma; margin&comma; 标准文档流&comma; 块级元素和行内元素&comma; 浮动 &comma;margin的用法

    盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...

随机推荐

  1. 自定义Spring Security权限控制管理(实战篇)

    上篇<话说Spring Security权限管理(源码)>介绍了Spring Security权限控制管理的源码及实现,然而某些情况下,它默认的实现并不能满足我们项目的实际需求,有时候需要 ...

  2. pyOpenSSL0&period;13安装失败

    /usr/lib64/python2.4/distutils/dist.py:236: UserWarning: Unknown distribution option: 'zip_safe' war ...

  3. 联想VIBE UI 固件ROM刷机包集合

    固件下载_联想乐问吧http://ask.lenovomobile.com/?c-157.html 联想VIBE UI 固件ROM刷机包集合 悬赏分:0     解决时间:2014/09/12 15: ...

  4. Apache 的启动/重启/停止

    Task: Start Apache 2 Server /启动apache服务 # /etc/init.d/apache2 startor$ sudo /etc/init.d/apache2 star ...

  5. JSON数组操作

    在jquery中处理JSON数组的情况中遍历用到的比较多,但是用添加移除这些好像不是太多. 今天试过json[i].remove(),json.remove(i)之后都不行,看网页的DOM对象中好像J ...

  6. NYIST OJ 题目38 布线问题

    最小生成树水题,先按最小生成树做,答案最后加上最小的从第i号楼接线到外界供电设施所需要的费用即可. #include<cstdio> #include<cstring> #in ...

  7. realypay

    1.判断新老接口的方法: 去网站后台接口配置的地方,如果有merchantno参数就是新接口,否则为老接口,新接口则不需要更新了. 2.老接口需要去网站后台卸载老的接口,然后再用新的(下载的文件)覆盖 ...

  8. HDU 2296 Ring &lbrack;AC自动机 DP 打印方案&rsqb;

    Ring Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submissio ...

  9. 习题9-4 uva 1630

    题意: 给你一串数字,要求你对其进行折叠使其长度最短. 折叠情况:全是一个字母 & 重复的字符串 AAAAAAAAAABABABCCD    -->   9(A)3(AB)CCD NEE ...

  10. Java框架中Struts和Struts2框架的区别

    struts1 与 struts2 的区别:1.都是 MVC 的 WEB 框架,2 struts1的老牌框架,应用很广泛,有很好的群众基础,使用它开发风险很小,成本更低!struts2虽然基于这个框架 ...