前言

之前在介绍css盒子模型的时候，大概讲过边框border，边框border是其中一个重要组成部分。本篇将具体介绍边框的属性， border 属性允许您指定元素边框的样式、宽度、颜色及圆角。

CSS 边框样式

border-style 边框样式有以下值：

• dotted - 定义点线边框
• dashed - 定义虚线边框
• solid - 定义实线边框
• double - 定义双边框
• groove - 定义 3D 坡口边框。
• ridge - 定义 3D 脊线边框。
• inset - 定义 3D inset 边框。
• outset - 定义 3D outset 边框。
• none - 定义无边框
• hidden - 定义隐藏边框

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。其中3D样式效果取决与边框颜色 border-color 值。

如下实例：

CSS 边框宽度

border-width 属性指定四个边框的宽度。可以将宽度设置为特定大小（以 px、pt、cm、em 等），或者使用以下三个预定义值之一：thin、medium 或 thick。

如下示例：

给不同边框设置宽度：

CSS 边框颜色

border-color 属性用于设置四个边框的颜色，通过以下方式设置颜色：

• name - 指定颜色名，比如 "red"
• HEX - 指定十六进制值，比如 "#ff0000"
• RGB - 指定 RGB 值，比如 "rgb(255,0,0)"
• HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"
• transparent - 完全透明

注意：如果未边框宽度为0时，即使设置了边框颜色也不会显示。

如下示例：

也可分别给每个边框设置不同颜色：

按不同方向边框单独设置样式、宽度、颜色

还可以按照上、右、下、左的顺序分别设置边框样式、宽度或颜色。如下示例：

以上写法等同于以下简写法，不同之处就是上面的写法对元素边框样式更精细控制：

p {
  height:100px;
  /*边框样式*/
  border-style: dotted solid dotted solid;
  /*边框宽度*/
  border-width: 2px 5px 10px 20px;
  /*边框颜色*/
  border-color: red rgb(0,255,0) #ff00ff orange;
}

更精简的写法

只使用一个border: style、width、color；设置边框样式。

如下示例：

这种写法，缺点就是四个边使用相同的样式、宽度、颜色，所以当要制作特殊的效果时候，就需要使用以上非简写方法。

边框圆角

border-radius 允许你设置元素的四个角的圆角大小。语法如下：

border-radius: 左上 右上 右下 左下；

这4个值定义了一个半径长度，分别表示水平和垂直方向的半径

你可以设置一个值，也可以设置二个或三个。和之前学习padding、margin类似，没有设置的那个值会以它的对角的值为准。比如以下示例：

以上都是圆形的角，水平和垂直方向半径相同，如果水平和垂直方向半径不一样，不就是椭圆了吗？

创建椭圆角，语法如下：

border-radius: 水平方向（左上 右上 右下 左下）/ 垂直方向（左上 右上 右下 左下）；

可以用斜杠设置第二组值。这时，第一组值表示水平半径，第二组值表示垂直半径。第二组值也可以同时设置1到4个值，应用规则与第一组值相同。

如下示例：

现在你会看到，如上图出现不规则边框，是不是很有意思，现在动手试试吧，探索其中的乐趣。

使用边框制作箭头

利用border 制作小三角，非常实用，当把宽度和高度设置为0，看到如下代码：

 border-width: 40px; 
  border-color: #F00 #0F0 #00F #0FF; 
  border-style: solid; 
  width: 0px; 
  height: 0px;

此时我们只需要将左边、下边、右边的 border 颜色设置为透明就是我们要的三角形了,如下代码实现倒三角图形：

border-color: #F00 transparent transparent transparent;

效果：

如果要其它方向的三角，同理设置不同方向的颜色为透明就可以了。

一般使用此方法用来制作气泡效果，非常实用，你不妨试试。

总结：

1、边框 border 样式、宽度、颜色。

2、边框简写方法及按方向分别设置。

3、边框圆角分以圆形半径和椭圆半径的角。

4、边框应用实例，制作三角形。

边框在网页中的应用非常广泛，比如按钮样式，气泡效果，三角形等等。

感谢关注，祝学习愉快。

上篇：前端入门——css颜色和背景