DIV+CSS 边框border的样式有哪些

前面我们说到用Border在设置边框,今天我们来说它有哪些样式可以让我们选择。

我们在设置Border时需要填写下列三个值,分别是宽度、样式、颜色,或者从父元素继承来的样式。

border-width规定边框的宽度。
border-style规定边框的样式。
border-color规定边框的颜色。
inherit规定应该从父元素继承 border 属性的设置。

首先来看看宽度border-width的值,可以被设定为下面这些:

thin定义细的边框。
medium默认。定义中等的边框。
thick定义粗的边框。
length允许您自定义边框的宽度。
inherit规定应该从父元素继承边框宽度。

再来看看border-style的有哪些:

none定义无边框。
hidden与 “none” 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。
dotted定义点状边框。在大多数浏览器中呈现为实线。
dashed定义虚线。在大多数浏览器中呈现为实线。
solid定义实线。
double定义双线。双线的宽度等于 border-width 的值。
groove定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge定义 3D 垄状边框。其效果取决于 border-color 的值。
inset定义 3D inset 边框。其效果取决于 border-color 的值。
outset定义 3D outset 边框。其效果取决于 border-color 的值。
inherit规定应该从父元素继承边框样式。

还有border-color的设置:

color_name规定颜色值为颜色名称的边框颜色(比如 red)。
hex_number规定颜色值为十六进制值的边框颜色(比如 #ff0000)。
rgb_number规定颜色值为 rgb 代码的边框颜色(比如 rgb(255,0,0))。
transparent默认值。边框颜色为透明。
inherit规定应该从父元素继承边框颜色。

这么一来多样个性的边框就出来啦,你看明白了吗?