CSS3新属性(上菜中.....)

clip(裁剪)
语法:clip:auto | <shape>
取值:
auto:
    对象无剪切
rect(<number>|auto <number>|auto <number>|auto <number>|auto):
    依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换,即此边不剪切。

    示例:clip:rect(auto 50px 20px auto)
    说明:上边不剪切,右边从左起第50个像素开始剪切直至最右边,下边从上起第20个像素开始剪切直至最底部,左边不剪切

说明: 检索或设置对象的可视区域。区域外的部分是透明的。
    这个属性将被废弃,推荐使用 clip-path 代替,在过渡阶段,仍然会存在一段时间。
    必须将position的值设为absolute或者fixed,此属性方可使用。
    对应的脚本特性为clip。
语法:
border-image:<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat '>

说明:
复合属性。设置或检索对象的边框样式使用图像来填充。
    使用图像替代 <' border-style '> 去定义边框样式。当 <' border-image '> 为none或图像不可见时,将会显示 <' border-style '> 所定义的边框样式效果。 

示例:
.test { border: 10px solid gray; border-image: url(test.png) 10/10px; }
如果例子中的图片不可见,或者未被加载,则会以 <' border '> 的定义呈现,如果图片载入成功,则以 <' border-image '> 的定义呈现。

.test {
    border- 2px 9px;
    border-style: solid;
    border-color: orange;
    border-image: url(skin/button.png) 2 9 fill repeat;
}
原文地址:https://www.cnblogs.com/chjb/p/4961757.html