CSS-边框-效果_html/css_WEB-ITnose

1.1边框

　　　　　　//指定边框的宽高

　　　　　　border-images-width:20px

　　　　　　//边框平铺的样式 stretch 拉升

　　　　　　round会自动调整缩放比例

　　　　　　repeat(重复)

　　　　　　border-images-repeat:stretch;

　　　　　　设置的图片将会被“切割”成九宫格形式，然后进行设置。如下图：

　　　　“切割”完成后生成虚拟的9块图形，然后按对应位置设置背景，其中四个角位置、形状保持不变，中心位置水平垂直两个方向平铺，如图

　　　　1、round和repeat之间的区别

　　　　round会自动调整尺寸，完整显示边框图片

　　　　repeat单纯平铺多余部分，会被“裁切”而不能完整显示。

　　　　2、 更改裁切尺寸

　　　　background-slice:34 36 27 27 分别设置裁切如下图

　　关于边框图片重点理解9 宫格的裁切及平铺方式，实际开发中应用不广泛，但是如能灵活动用会给我们带来不少便利。

　　1.1.4案例 用css实现

代码实现：

查看更多关于CSS-边框-效果_html/css_WEB-ITnose的详细内容...