当前位置主页 > 资料库 > 前端教程 > CSS Borders:你了解CSS的边框样式吗?

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

04-29

每一个HTML元素都可以通过CSS来提供一个边框样式。CSS边框样式有以下10种:nonehiddensoliddasheddottedgrooveridgedoubleinsetoutset。另外还有3种CSS3的边框样式:wavedot-dashdot-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个像素。ridgegroove比较相似,一个是上凸样式,一个是下凹样式。

CSS边框可以使用border-leftborder-bottomborder-rightborder-top属性为元素的各个边分别设置边框样式。我们还可以进一步细分为:border-right-colorborder-left-width等。

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

小结

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

Previous:
上一篇:CSS背景动画和多重背景动画
Next:
下一篇:javascript编程书写规范
返回顶部