border基础属性

style width和color,三个属性,不分先后都可以识别

示例

border:red 5px solid
border的基础三属性

border-image

需先设置border属性

四个参数为图片地址,九宫格切分深度,水平重复还是拉伸,竖直重复还是拉伸。如url(1.jpg) 27 repeat stretch,深度也可以细化为4个数值。Repeat/round/stretch 三个选择,round类似repeat但是在接口地方进行圆滑处理。

示例

border-image:url(logo1.jpg) 27 repeat stretch
border-image示例

border-radius

需先设置border属性

可以使用1-8个参数分别去调整4个角八个方向,一般只需要一个值,统一进行圆滑处理。

示例

border-radius:30px
border-radius示例

box-shadow

参数:不写/insert 右侧阴影厚度 下侧阴影厚度 模糊厚度 阴影颜色

示例

box-shadow:10px 10px 8px #ccc
box-shadow示例