初试边框

1、边框

（1）边框的属性

属性	说明
border	整体边框
border-top	上边框
border-bottom	下边框
border-right	右边框
border-left	左边框

（2）边框的样式: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	规定应该从父元素继承边框样式。

（3）设置合并边框模型:border-collapse

值	描述
separate	默认值。边框会被分开。不会忽略 border-spacing 【相邻边框的距离】和 empty-cells 属 是否显示表格中的空单元格性。
collapse	边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

（4）border-image边框的图像

1）语法

  
  border-image: source slice width outset repeat|initial|inherit;

2）属性

属性	描述
border-image-source	用在边框的图片的路径。
border-image-slice	图片边框向内偏移。
border-image-width	图片边框的宽度。
border-image-outset	边框图像区域超出边框的量。
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

3）属性值

a、border-image-source的值

border-image-source的值	说明
none	没有图像被使用
image	边框使用图像的路径

b、border-image-slice的值

border-image-slice的值	说明
number	数字表示图像的像素（位图图像）或向量的坐标（如果图像是矢量图像）
%	百分比图像的大小是相对的：水平偏移图像的宽度，垂直偏移图像的高度
fill	保留图像的中间部分

c、border-image-width的值

border-image-width的值	说明
number	表示相应的border-width 的倍数
%	边界图像区域的大小：横向偏移的宽度的面积，垂直偏移的高度的面积
auto	如果指定了，宽度是相应的image slice的内在宽度或高度

d、border-image-outset的值

border-image-outset的值	描述
length	设置边框图像与边框（border-image）的距离，默认为0。
number	代表相应的 border-width 的倍数

e、border-image-repeat的值

属性值	描述
stretch	默认值。拉伸图像来填充区域
repeat	平铺（repeated）图像来填充区域。
round	类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。
space	类似 repeat 值。如果无法完整平铺所有图像，扩展空间会分布在图像周围
initial	将此属性设置为默认值。查看 initial
inherit	从父元素中继承该属性。 查看 inherit

（5）border-colour的值

属性	说明
border-colour	边框的颜色

（6）box-shadow：阴影

1）语法

  
  box-shadow: h-shadow v-shadow blur spread color inset;

2）属性值

属性值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影