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的值
(6)box-shadow:阴影
1)语法
box-shadow: h-shadow v-shadow blur spread color inset;
2)属性值
属性值 | 说明 |
---|
h-shadow | 必需的。水平阴影的位置。允许负值 |
v-shadow | 必需的。垂直阴影的位置。允许负值 |
blur | 可选。模糊距离 |
spread | 可选。阴影的大小 |
color | 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 |
inset | 可选。从外层的阴影(开始时)改变阴影内侧阴影 |