三剑客实战之Css入门基础知识【css边框属性教程一】

CSS 边框属性

关键词：border

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

CSS 边框样式

关键词：border-style 

border-style 属性作用于指定显示的边框外观类型。可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

以下为取值范围定义：

提示：除非设置了 border-style 属性，否则其他 CSS 边框属性将不会起到作用！

CSS 边框宽度

关键词：border-width

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;
  }
  
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 

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

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

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

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

HSL - 指定 HSL 值，比如 "hsl(0, 800%, 30%)"

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;
  }

/*特定边框的颜色 */
p.one {
  border-style: solid;
  border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
  }

/*HEX 值 */
p.one {
  border-style: solid;
  border-color: #ff0000;/* 红色 */
  }

/*RGB 值 */
p.one {
  border-style: solid;
  border-color: rgb(255, 0, 0);/* 红色 */
  }

/*HSL 值 */
p.one {
  border-style: solid;
  border-color: hsl(0, 100%, 50%);/* 红色 */
  }

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

如果 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 也同样适用。

CSS 简写边框属性

关键词： Border - 简写属性

就像您在上一章中所见，处理边框时要考虑许多属性。也可以在一个属性中指定所有单独的边框属性，这是为了缩减代码，

各个边框属性的简写属性：

border-width

border-style（必需）

border-color

代码示例：

p {
  border: 5px solid red;/*含义：5px的红色实线边框。此属性是 border-width、border-style 以及 border-color 的简写属性*/
  }

p {
  border-left: 6px solid red;/*含义：左边分布6px的红色实线边框*/
  background-color: lightgrey;/*背景颜色为lightgrey*/
  }
  
p {
  border-bottom: 6px solid red;/*含义：下边分布6px的红色实线边框*/
  background-color: lightgrey;/*背景颜色为lightgrey*/
}

相關 软件应用