CSS边框border样式缩写

时间：2013-8-1类别：Web前端

CSS边框border样式缩写

在 HTML 中，我们使用表格来创建文本周围的边框，但是通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。每个边框有 3 个方面：宽度、样式，以及颜色。

一、边框样式合成

CSS 代码复制

/*边框各属性独立的样式进行CSS压缩合并*/

border-color:#000; border-style:solid; border-width:1px

/*可以简写为：*/

border:1px solid #000

/*左边框各属性独立的合并*/

border-left-color:#000; border-left-style:solid; border-left-width:1px

/*可以简写为*/

border-left:1px solid #000

二、三边有边框，一边无边框简写缩写

CSS 代码复制

/*上、下、左相同边框样式，右边无边框*/

border-left:1px solid #000;

border-top:1px solid #000;

border-bottom:1px solid #000;

/*简写为：*/

border:1px solid #000;border-right:0

三、附带列出边框border的其它属性

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。

标签：