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-width: 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