CSS边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

CSS border 属性设置元素边框的样式、宽度和颜色。

CSS 边框属性（Border）
序号	属性	描述
1	border	简写属性，在一个声明中设置所有的`边框属性`。
2	border-width	简写属性，用于为元素的所有边框设置`宽度`，或者单独地为各边边框设置`宽度`。
3	border-style	简写属性，用于设置元素所有边框的`样式`，或者单独地为各边设置边框`样式`。
4	border-color	简写属性，设置元素的所有边框中可见部分的`颜色`，或为 4 个边分别设置`颜色`。
5	border-top	简写属性，在一个声明中设置所有的`上边框属性`。
	border-top-width	设置上边框的`宽度`。
	border-top-style	设置上边框的`样式`。
	border-top-color	设置上边框的`颜色`。
6	border-right	简写属性，在一个声明中设置所有的`右边框属性`。
	border-right-width	设置右边框的`宽度`。
	border-right-style	设置右边框的`样式`。
	border-right-color	设置右边框的`颜色`。
7	border-bottom	简写属性，在一个声明中设置所有的`下边框属性`。
	border-bottom-width	设置下边框的`宽度`。
	border-bottom-style	设置下边框的`样式`。
	border-bottom-color	设置下边框的`颜色`。
8	border-left	简写属性，在一个声明中设置所有的`左边框属性`。
	border-left-width	设置左边框的`宽度`。
	border-left-style	设置左边框的`样式`。
	border-left-color	设置左边框的`颜色`。

1.在一个声明中设置所有的边框属性

在一个声明中依次设置边框的宽度、样式和颜色属性

<head>
    <title>CSS border属性</title>
    <style type="text/css">
       p {
          border: 5px dashed rgb(250,0,255);
          width:50%;
          }
    </style>
</head>
<body>
    <p>国外技术站点Mashable.com评出了开发人员在2011年应该关注的5项Web开发技术，包括jQuery Mobile(jQuery移动版)、Hardware-Accelerated Web Browsers(基于硬件加速的浏览器)、Node.js(服务器端JavaScript)、Real-Time Clickstream Sharing(实时点击流分享)、NoSQL Databases(NoSQL数据库)入选。</p>
</body>

2.设置四条边框的宽度

border-width 简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。

取值

值	描述
thin	定义细的边框。
medium	默认。定义中等的边框。
thick	定义粗的边框。
length	允许您自定义边框的宽度。
inherit	规定应该从父元素继承边框宽度。

border-width属性值的简写形式

方法是按照规定的顺序，给出1个、2个、3个或者4个属性值，它们的含义将有所区别，具体含义如下：

如果给出1个属性值，表示四条边框的属性； 实例：
border-width:thin;
- 所有 4 个边框都是细边框

如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性； 实例：
border-width:thin medium;
- 上边框是 10px
- 右边框和左边框是中等边框

如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性； 实例：
border-width:thin medium thick;
- 上边框是 10px
- 右边框和左边框是中等边框
- 下边框是粗边框

如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。 实例：
border-width:thin medium thick 10px;
- 上边框是细边框
- 右边框是中等边框
- 下边框是粗边框
- 左边框是 10px 宽的边框

综合实例：

<head>
    <title>CSS border-width属性</title>
    <style type="text/css">
       p {
          border-width:thin medium thick 10px;
          border-style:dashed;
          width:50%;
          }
       div {
          border-width:10px 3px;
          border-style:solid;
          width:50%;
          }
    </style>
</head>
<body>
    <p>国外技术站点Mashable.com评出了开发人员在2011年应该关注的5项Web开发技术，包括jQuery Mobile(jQuery移动版)、Hardware-Accelerated Web Browsers(基于硬件加速的浏览器)、Node.js(服务器端JavaScript)、Real-Time Clickstream Sharing(实时点击流分享)、NoSQL Databases(NoSQL数据库)入选。</p>
    <div>jQuery已经成为JavaScript事实上的代名词，很大程度上是因为其可扩展性，易用性以及在项目管理方面可控。随着用于平板电脑和智能手机等设备的触屏优化技术的演进，以及与此相关的web框架的发展，jQuery Mobile将成为跨平台，支持多设备的手机应用的非常重要的技术选择之一。</div> </body>

3.设置四条边框的样式

border-style 简写属性为元素的所有边框设置样式，或者单独地为各边边框设置样式。

取值

值	描述
none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

border-style属性值的简写形式与上述border-width的简写形式的规则类似综合实例：

<head>
    <title>CSS border-style属性</title>
    <style type="text/css">
       p {
          border-style:dotted solid double dashed;
          width:50%;
          }
       div {
          border-width:7px 3px;
          border-style:dashed solid;
          width:50%;
          }
    </style>
</head>
<body>
    <p>国外技术站点Mashable.com评出了开发人员在2011年应该关注的5项Web开发技术，包括jQuery Mobile(jQuery移动版)、Hardware-Accelerated Web Browsers(基于硬件加速的浏览器)、Node.js(服务器端JavaScript)、Real-Time Clickstream Sharing(实时点击流分享)、NoSQL Databases(NoSQL数据库)入选。</p>
    <div>jQuery已经成为JavaScript事实上的代名词，很大程度上是因为其可扩展性，易用性以及在项目管理方面可控。随着用于平板电脑和智能手机等设备的触屏优化技术的演进，以及与此相关的web框架的发展，jQuery Mobile将成为跨平台，支持多设备的手机应用的非常重要的技术选择之一。</div> </body>

4.设置四条边框的颜色

border-color 简写属性为元素的所有边框设置颜色，或者单独地为各边边框设置颜色。

综合实例：

<head>
    <title>CSS border-color属性</title>
    <style type="text/css">

p {

									          border-style:dotted solid double dashed;

									          width:50%;

									          border-width:5px;

									          border-color:Maroon;

									          }

</style>
</head>
<body>
<p>国外技术站点Mashable.com评出了开发人员在2011年应该关注的5项Web开发技术，包括jQuery Mobile(jQuery移动版)、Hardware-Accelerated Web Browsers(基于硬件加速的浏览器)、Node.js(服务器端JavaScript)、Real-Time Clickstream Sharing(实时点击流分享)、NoSQL Databases(NoSQL数据库)入选。</p>
</body>

5.设置上边框的属性

border-top 简写属性，在一个声明中依次设置上边框的宽度、样式和颜色属性。其他属性的设置类似。

下面的两个写法，页面效果相同：

<head>
    <title>CSS border-top属性</title>
    <style type="text/css">
       p {
          border-style:solid;
          width:50%;
          border-top:2px dashed blue;
          }
    </style>
</head>
<body>
    <p>国外技术站点Mashable.com评出了开发人员在2011年应该关注的5项Web开发技术，包括jQuery Mobile(jQuery移动版)、Hardware-Accelerated Web Browsers(基于硬件加速的浏览器)、Node.js(服务器端JavaScript)、Real-Time Clickstream Sharing(实时点击流分享)、NoSQL Databases(NoSQL数据库)入选。</p>
</body>

<head>
    <title>CSS border-top属性</title>
    <style type="text/css">
       p {
          border-style:solid;
          width:50%;

border-top-width:2px;

									          border-top-style:dashed;

									          border-top-color:Blue;

          }
    </style>
</head>
<body>
    <p>国外技术站点Mashable.com评出了开发人员在2011年应该关注的5项Web开发技术，包括jQuery Mobile(jQuery移动版)、Hardware-Accelerated Web Browsers(基于硬件加速的浏览器)、Node.js(服务器端JavaScript)、Real-Time Clickstream Sharing(实时点击流分享)、NoSQL Databases(NoSQL数据库)入选。</p>
</body>

CSS边框属性