作者:wangnan00 | 来源:互联网 | 2023-05-18 10:01
clip(裁剪)
语法:clip:auto |
取值:
auto:
对象无剪切
rect(|auto |auto |auto |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;
}