不常用的css,自己不常用的css属性回顾

文字截断属性：word-wrap:

break-word;当在一个宽度有限的div中加如超过宽度的文字时，如果想截断，请毫不犹豫的使用此属性。

​clip剪裁属性：clip:rect(0px,60px,200px,0px);

​最终剪裁的矩形的上边距离原始元素的上边缘0像素； 剪裁矩形的右边缘距离原元素左边缘的距离是60像素；剪裁矩形的下边缘距离原元素顶部的距离为200像素； 剪裁矩形的左边缘距离原元素左边缘的距离是0像素。

这里借用张鑫旭大神的一篇博文吧(http://www.zhangxinxu.com/wordpress/2010/01/css3-border-image详解、应用及jquery插件/​)这篇博文主要讲的是border-image的，不过中间部分有作者将clip属性于之对比的demo。填写图片摘要(选填)

这个像json的logo的图片，采用的clip属性就是 clip:rect(30%,35%,40%,30%);根据上文标红的规则可以看出来，上右下左四刀距离原先的图像位置分别是30%,35%,40%,30%，所以最后的效果就是一个空白。但是有个条件，必须把图片的position属性设置为absolute。

​既然说到这里，就提一提css3关于boder的一个新加属性。

我们回忆一下background 的属性 可以写成：

background:green url('1.gif') no-repeat top

right;​//基本分为no-repeat

repeat x-repeat y-repeat​.。

background图片就是重复，不重复，水平重复，垂直重复，总之就是围绕repeat(重复)这个词打转，一家独大。而对于border-image，可谓是三足鼎立，repeat(重复)只是其中之一，其余两个是round(平铺)和stretch(拉伸)。其中，stretch是默认值。​

border-image：border-image:url(border.png) 10 10

round;​

参数可以是0~2任意个数。不写参数就默认是stretch​

​