边框
1 边框圆角
border-radius
设置或检索对象使用圆角边框。
提供2个参数,2个参数以“/”分隔,每个参数允许设置1~4个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数 水平半径:
如果提供全部四个参数值,将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
如果只提供一个,将用于全部的于四个角。
如果提供两个,第一个用于上左(top-left)、下右(bottom-right),第二个用于上右(top-right)、下左(bottom-left)。
如果提供三个,第一个用于上左(top-left),第二个用于上右(top-right)、下左(bottom-left),第三个用于下右(bottom-right)。
垂直半径也遵循以上4点。
border-top-left-radius 设置或检索对象的左上角圆角边框
border-top-right-radius 设置或检索对象的右上角圆角边框
border-bottom-right-radius 设置或检索对象的右下角圆角边框
border-bottom-left-radius 设置或检索对象的左下角圆角边框
2 边框图片
border-image-source 设置或检索对象的边框样式使用图像路径。
取值: url
border-image-slice 设置或检索对象的边框背景图的分割方式。
取值: 浮点数/百分比
border-image-width 设置或检索对象的边框厚度。
取值: 长度值/百分比/浮点数
border-image-outset 设置或检索对象的边框背景图的扩展
取值: 长度值/浮点数
border-image-repeat 设置或检索对象的边框图像的平铺方式。
取值: stretch: 指定用拉伸方式来填充边框背景图。 repeat: 指定用平铺方式来填充边框背景图。当图片碰到边界时,如果超过则被截断。 round: 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。 space: 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。
border-image 复合属性。设置或检索对象的边框样式使用图像来填充。
border-image:<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat '>
3 外轮廓
outline-width 外廓线宽度
: 用长度值来定义轮廓的厚度。不允许负值 medium: 定义默认宽度的轮廓。 thin: 定义比默认宽度细的轮廓。 thick: 定义比默认宽度粗的轮廓。
outline-style 外廓线风格
none: 无轮廓。与任何指定的 <' outline-width '> 值无关
dotted: 点状轮廓。
dashed: 虚线轮廓。
solid: 实线轮廓
double: 双线轮廓。两条单线与其间隔的和等于指定的 <' outline-width '> 值
groove: 3D凹槽轮廓。
ridge: 3D凸槽轮廓。
inset: 3D凹边轮廓。
outset: 3D凸边轮廓。
outline-color 外廓线颜色
outline-offset 外廓线的偏移量, 取值长度单位
outline 复合属性,给元素周围绘制一条轮廓线
<' outline-width '> || <' outline-style '> || <' outline-color '>