CSS Borders:你了解CSS的边框样式吗？

每一个HTML元素都可以通过CSS来提供一个边框样式。CSS边框样式有以下10种：none、hidden、solid、dashed、dotted、groove、ridge、double、inset和outset。另外还有3种CSS3的边框样式：wave、dot-dash和dot-dot-dash。这几个CSS3边框样式并不是所有的浏览器都支持的。

CSS边框的宽度通常是以像素为单位，在大多数网站的设计中，元素的边框通常都设置的十分的细，使用像素作为单位最为合适。从理论上来说，border-width属性可以设置为除了百分比之外的任何CSS测量单位。CSS边框的颜色可以设置为任何CSS可以使用的颜色。

最常用的设置元素CSS边框的方法是使用简写的方式：

border: style thickness color;
                            

下面是一些CSS边框的例子，例子中每个矩形都用border-radius属性设置了圆角。

border: 4px solid #222

border: 4px dashed #222

border: 4px dotted #222

border: 4px groove #777

border: 4px ridge #777

border: 4px double #222

border: 4px inset #777

border: 4px outset #777

double的CSS边框样式比较特别，它的内边框和外边框以及它们之间的间隙之和为4个像素。ridge和groove比较相似，一个是上凸样式，一个是下凹样式。

CSS边框可以使用border-left、border-bottom、border-right和border-top属性为元素的各个边分别设置边框样式。我们还可以进一步细分为：border-right-color和border-left-width等。

使用CSS边框我们可以制作出非常漂亮的图片边框效果。

小结

CSS边框系统是CSS的基础知识，每一个前端开发者都应该了解和掌握它。现在，已经有很多网站开始使用SVG来控制元素的边框样式，我们将在以后的文章中介绍这些内容。希望这篇文章对你有所帮助。