第3章 CSS3边框-1

2016-12-08 本文已影响12人白小虫

提到边框，大家首先想到的是CSS的boder属性。不错，border属性是CSS种盒模型基础属性之一。在CSS3中，关于边框的运用会有什么样的不同之处呢？又将如何使用？本章我们带着这些问题开始我们的CSS3边框之旅。

3.1 CSS3边框简介

border属性在CSS1中就已经定义了，使用它可以设置元素的边框风格。

CSS1和CSS2中的边框属性确实很简单，其主要包括三个类型值。

在实际中可以将上面三个属性合并在一起，其缩写语法如下：

border: border-width border-style border-color;

缩写后的每个属性之间使用空格隔开，而且它们之间没有先后顺序，可这里三个值中唯一需要的值是“border-style”。

属性值	功能描述	示例代码
`none`	定义无边框	`.ele{border:none;}`
`hidden`	与"`none`"相同，不过应用于表时除外，对于表，`hidden`用于解决边框冲突	`.ele{border:hidden;}`
`dotted`	定义点状边框	`.ele{border: 3px dotted red;}`
`dashed`	定义虚线边框	`.ele{border: 3px dashed red;}`
`solid`	定义实线边框	`.ele{border: 3px solid red;}`
`double`	定义双线。双线的宽度等于`border-width`的值	`.ele{border: 3px double red;}`
`groove`	定义3D凹槽边框，其效果取决于`border-color`的值	`.ele{border: 3px groove red;}`
`ridge`	定义3D垄状边框，其效果取决于`border-color`的值	`.ele{border: 3px ridge red;}`
`inset`	定义3D`inset`边框，其效果取决于`border-color`的值	`.ele{border: 3px inset red;}`
`outset`	定义3D`outset`边框，其效果取决于`border-color`的值	`.ele{border: 3px outset red;}`
`inherit`	规定应该从父元素继承边框样式。部分浏览器不支持这个属性值	`.ele{border: 3px inherit red;}`