图解 CSS (2): border

样式表可以是外部的、内联的、嵌入的、链接的, 譬如下面的内联样式将作用于所有 ID=Test 的标签:

<style> #Test {...} </style>

border
border-width
border-style
border-colorborder-top
border-top-width
border-top-style
border-top-colorborder-bottom
border-bottom-width
border-bottom-style
border-bottom-colorborder-left
border-left-width
border-left-style
border-left-colorborder-right
border-right-width
border-right-style
border-right-colorborder-collapse
border-spacing

border: 宽度样式颜色;

border 的宽度有三个常数值: medium(默认)、thick(粗)、thin(细).

自定义宽度最麻烦的就是宽度的单位(in、cm、mm、em、ex、pt、pc、px), 我喜欢用像素(px).

border 的样式: none(默认)、solid、double、dotted、dashed、groove、ridge、inset、outset.

后四种 3D 样式, 如果使用默认的 3D 着色颜色效果会更好:

指定颜色有五种方法(譬如蓝色): RGB(0,0,255); #0000FF; #00F; Blue; RGB(0,0,100%).

border: 宽度样式颜色; 可以从后向前省略, 也可以用 border-width、border-style、border-color 分开表达.

可以用 border-top、border-bottom、border-left、border-right 分别描述四个边;
并可用 border-top-width、border-top-style、border-top-color 等描述各边的: 宽度、样式、颜色.

上面列出的边框相关的样式还有: border-collapse、border-spacing; 这是表格相关的.

border-collapse 有两个常数值: collapse、separate, 决定边框是否分开:

border-spacing: 用来设置表格中单元格的间距; 这个好像 IE(8) 不支持, 不过这和表格的 cellspacing 属性是一样的.

图解 CSS (2): border - 边框相关推荐

CSS中Border(边框)
1.css边框 css边框(border)可以使围绕元素内容和内边距的一条或多条线,对于这些线条,可以直接自定义它们的样式,宽度颜色等. 2.边框样式 border-style的值 | none 默认 ...
CSS的border边框属性边框样式内外边框圆角合集
CSS border 属性允许指定元素边框的样式.宽度和颜色. 目录 1.四个边框 2.内外边框 3.边框样式 4.圆角边框 1.border边框属性可以设置一到四个值(上边框,右边框,下边框,左边 ...
css 设置border边框颜色渐变效果
一.效果首先可以看一下下图显示的实现效果: 底部边框,左侧渐变效果右侧边框,上下都有一个渐变的效果点击查看demo代码二.实现 1. linear-gradient 首先我们先了解一下css中 ...
html边框复合属性,详解CSS的border边框属性及其在CSS3中的新特性
基础你可能很熟悉边的最基本用法. CSS Code复制内容到剪贴板 border:1pxsolidblack; 上面的代码将给元素应用1px的边.即简洁又简单:但我们也可以稍作修改. CSS Code ...
html边框显示长短调整,CSS之border边框长度控制
需要边框长度比容器小一些时,用div嵌套,但伪类在实现这个效果时很方便,只需要一个div就够了,另外调整padding和margin都不会很麻烦. border top border left bor ...
css基础——border边框
border-width 不支持百分比值. border-style的默认值是none.只设置border-width或border-color是看不到边框的. border-style:solid实 ...
css中border边框纹理,使用CSS3实现的几种纹理图案和大象拼图
CSS 语言: CSSSCSS 确定 .pattern1 { background: linear-gradient(135deg, #eee 25%, transparent 25%) -50px ...
css中border边框纹理,8个CSS实现的纹理图案
CSS 语言: CSSSCSS 确定 html, body { margin: 0; padding: 0; height: 100%; } body { display: flex; flex-wr ...
图解CSS的padding,margin,border属性
图解CSS的padding,margin,border属性(详细介绍及举例说明) 图解CSS的padding,margin,border属性 W3C 组织建议把所有网页上的对像都放在一个盒(box)中 ...

图解 CSS (2): border - 边框

图解 CSS (2): border - 边框相关推荐

最新文章

热门文章