边框图片
- border-image
- 复合属性。设置或检索对象的边框样式使用图像来填充。
border-image:source slice/width/outset(slice，width，outset用/分割) repeat
- border-image-source 图片地址
- 值: url
- border-image-slice 图片截取方式
- 值 浮点数/百分比（不能有单位）
- 一个值（四个方向）
- 两个值（上下，左右）
- 三个值（上，左右，下）
- 四个值（上，右，下，左）
- border-iamge-width 边框图片厚度
- 值: 长度值/百分比/浮点数
- border-image-outset 外延 值 长度单位
- 值: 长度值/浮点数
- borde-image-repeat 延伸方式
- 值 stretch： 指定用拉伸方式来填充边框背景图。
- repeat： 指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。
- round： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态
调整图片的大小直至正好可以铺满整个边框。 - space： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态
调整图片的之间的间距直至正好可以铺满整个边框。
盒子倒影
-
box-reflect
-webkit-box-reflect:direction offset 遮罩 direction: above(指定倒影在对象的上面)/below（指定倒影在对象的下面）/left（指定倒影在对象的左面）/right（指定倒影在对象的右面） offset（定义倒影与对象之间的间隔）:长度单位（可以是负值）或者百分比（可以为负的） 遮罩：url/渐变（线性渐变，径向渐变，重复渐变）