蓝染惣右介结局:CSS边框属性

        多福老人欢迎您                                http://qwp43.360doc.com

CSS 教程与实例代码
CSS 教程
CSS 简介
CSS 语法
CSS 字体属性 (Font)
CSS 常用文本属性
CSS 背景属性
CSS 边框属性(Border)
CSS 边距属性(Margin)
CSS 间隙属性(Padding)
CSS 盒子模式 (Box Model)
CSS 列表属性(List-style)
CSS 伪类(Pseudo-class)
CSS 代码实例
CSS 参考 (Reference)
CSS 知识库
W3C CSS 2.1 标准英文版
CSS边框属性
边框风格属性(border-style)
这个属性用来设定上下左右边框的风格，它的值如下：
none (没有边框，无论边框宽度设为多大) dotted (点线式边框) dashed (破折线式边框) solid (直线式边框) double (双线式边框) groove (槽线式边框) ridge(脊线式边框) inset (内嵌效果的边框) outset (突起效果的边框)
演示示例：分别使用none,dotted, dashed, solid, double, groove, ridge, inset, outset的CSS边框风格属性示例






































效果
这个div的CSS边框风格(border-style)属性缺省值是none。
这个div的CSS边框风格(border-style)属性是none。
这个div的CSS边框风格(border-style)属性是solid。
这个div的CSS边框风格(border-style)属性是dotted。
这个div的CSS边框风格(border-style)属性是dashed。
这个div的CSS边框风格(border-style)属性是double。
这个div的CSS边框风格(border-style)属性是groove。
这个div的CSS边框风格(border-style)属性是ridge。
这个div的CSS边框风格(border-style)属性是inset。
这个div的CSS边框风格(border-style)属性是outset。
边框宽度属性(border-width)
这个属性用来设定上下左右边框的宽度，它的值如下：
medium (是缺省值) thin (比medium细) thick (比medium粗)
用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。
演示示例：
分别用medium, thin, thick和长度单位定制的CSS边框宽度属性示例





















效果
这个div的CSS边框宽度(border-width)属性缺省值是medium。
这个div的CSS边框宽度(border-width)属性值是thin。
这个div的CSS边框宽度(border-width)属性值是thick。
这个div的CSS边框宽度(border-width)属性值是10px。
这个div的CSS边框宽度(border-width)属性值是5mm。
注：这里边框没显示出来
边框颜色属性(border-color)
这个属性用来设定上下左右边框的颜色。例句如下：
.d5 {border-color:gray;border-style:solid;}
演示示例






















效果
这个div的CSS边框颜色(border-color)属性值是橙色。
这个div的CSS边框颜色(border-color)属性值是绿色。
这个div的CSS边框颜色(border-color)属性值是蓝色。
这个div的CSS边框颜色(border-color)属性值是番茄红。
这个div的CSS边框颜色(border-color)属性值是灰色。
注：这里边框颜色也没显示出来
边框属性(border)
这个属性是边框属性的一个快捷的综合写法，它包含border-width, border-style和border-color。
例句如下：
.d1 {border:5px solid gray;}
演示示例









效果
这个div的边框属性：边框宽度(border-width)为5px；边框风格(border-style)为直线式；
边框颜色为灰色。
注：这里边框颜色也没显示出来
单边边框属性
上下左右四个边框不但可以统一设定，也可以分开设定。
设定上边框属性，你可以使用border-top, border-top-width, border-top-style, border-top-color。
设定下边框属性，你可以使用border-bottom, border-bottom-width, border-bottom-style, border-bottom-color。
设定左边框属性，你可以使用border-left, border-left-width, border-left-style, border-left-color。
设定上边框属性，你可以使用border-right, border-right-width, border-right-style, border-right-color。
演示示例：设置单边边框属性的示例













效果
单个边框属性：
设置上边框用border-top
设置下边框用border-bottom
设置左边框用border-left
设置右边框用border-right
注：这里边框颜色也没显示出来