CSS-7 边框

却尘

CSS边框

CSS 边框属性

CSS border 属性允许您指定元素边框的样式、宽度和颜色。

我的所有边都有边框。

我有一条红色的下边框。

我有圆角边框。

我有一条蓝色的左边框。

CSS 边框样式

border-style 属性指定要显示的边框类型。

允许以下值：

·  dotted - 定义点线边框

·  dashed - 定义虚线边框

·  solid - 定义实线边框

·  double - 定义双边框

·  groove - 定义 3D 坡口边框。效果取决于 border-color 值

·  ridge - 定义 3D 脊线边框。效果取决于 border-color 值

·  inset - 定义 3D inset 边框。效果取决于 border-color 值

·  outset - 定义 3D outset 边框。效果取决于 border-color 值

·  none - 定义无边框

·  hidden - 定义隐藏边框

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

实例

演示不同的边框样式：

p.dotted{border-style: dotted;}

p.dashed{border-style: dashed;}

p.solid{border-style: solid;}

p.double{border-style: double;}

p.groove{border-style: groove;}

p.ridge{border-style: ridge;}

p.inset {border-style:inset;}

p.outset{border-style: outset;}

p.none {border-style:none;}

p.hidden{border-style: hidden;}

p.mix {border-style:dotted dashed solid double;}

结果：

点状边框。

虚线边框。

实线边框。

双线边框。

凹槽边框。其效果取决于 border-color 的值。

垄状边框。其效果取决于 border-color 的值。

3D inset 边框。其效果取决于 border-color 的值。

3D outset 边框。其效果取决于 border-color 的值。

无边框。

隐藏边框。

混合边框。

CSS边框宽度

border-width 属性指定四个边框的宽度。

可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick：

实例

演示不同的边框宽度：

p.one {

  border-style: solid;

  border-width: 5px;

}

p.two {

  border-style: solid;

  border-width: medium;

}

p.three {

  border-style: dotted;

  border-width: 2px;

}

p.four {

  border-style: dotted;

  border-width: thick;

}

结果：

5px border-width

medium border-width

2px border-width

thick border-width

特定边的宽度

border-width 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）：

实例

p.one {

  border-style: solid;

  border-width: 5px 20px; /* 上边框和下边框为 5px，其他边为 20px */

}

p.two {

  border-style: solid;

  border-width: 20px 5px; /* 上边框和下边框为 20px，其他边为 5px */

}

p.three {

  border-style: solid;

  border-width: 25px 10px 4px 35px; /* 上边框 25px，右边框 10px，下边框 4px，左边框 35px */

}

CSS 边框颜色

border-color 属性用于设置四个边框的颜色。

可以通过以下方式设置颜色：

·  name - 指定颜色名，比如 "red"

·  HEX - 指定十六进制值，比如 "#ff0000"

·  RGB - 指定 RGB 值，比如"rgb(255,0,0)"

·  HSL - 指定 HSL 值，比如 "hsl(0,100%, 50%)"

·  transparent

注释：如果未设置 border-color，则它将继承元素的颜色。

实例

演示不同的边框颜色：

p.one {

  border-style: solid;

  border-color: red;

}

p.two {

  border-style: solid;

  border-color: green;

}

p.three {

  border-style: dotted;

  border-color: blue;

}

结果：

红色实线边框

绿色实线边框

蓝色点状边框

特定边框的颜色

border-color 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

实例

p.one {

  border-style: solid;

  border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */

}

HEX 值

边框的颜色也可以使用十六进制值（HEX）来指定：

实例

p.one {

  border-style: solid;

  border-color: #ff0000; /* 红色 */

}

RGB 值

或者使用 RGB 值：

实例

p.one {

  border-style: solid;

  border-color: rgb(255, 0, 0); /* 红色 */

}

HSL 值

也可以使用 HSL 值：

实例

p.one {

  border-style: solid;

  border-color: hsl(0, 100%, 50%); /* 红色 */

}

CSS边框各边

CSS 边框 - 单独的边

从上一章的例子中，您已经看到可以为每一侧指定不同的边框。

在 CSS 中，还有一些属性可用于指定每个边框（顶部、右侧、底部和左侧）：

实例

p {

  border-top-style: dotted;

  border-right-style: solid;

  border-bottom-style: dotted;

  border-left-style: solid;

}

结果：

不同的边框样式

不同的边框样式

上例的结果与此相同：

实例

p {

  border-style: dotted solid;

}

它的工作原理是这样的：

如果 border-style 属性设置四个值：

border-style: dotted solid double dashed;

·  上边框是虚线

·  右边框是实线

·  下边框是双线

·  左边框是虚线

如果 border-style 属性设置三个值：

border-style: dotted solid double;

·  上边框是虚线

·  右和左边框是实线

·  下边框是双线

如果 border-style 属性设置两个值：

border-style: dotted solid;

·  上和下边框是虚线

·  右和左边框是实线

如果 border-style 属性设置一个值：

border-style: dotted;

·  四条边均为虚线

实例

/* 四个值 */

p {

  border-style: dotted solid double dashed;

}

/* 三个值 */

p {

  border-style: dotted solid double;

}

/* 两个值 */

p {

  border-style: dotted solid;

}

/* 一个值 */

p {

  border-style: dotted;

}

上例中使用的是 border-style 属性。但 border-width 和 border-color 也同样适用。