css中clip 怎么用

html-css012

css中clip 怎么用,第1张

定义

clip 属性设置元素的形状。

当一幅图像的尺寸大于包含它的元素时会发生什么呢?"clip" 属性允许您规定一个元素的可见尺寸,这样此元素就会被修剪并显示为这个形状。

继承性:No

说明

这个属性用于定义一个剪裁矩形。对于一个绝对定义元素,在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大,也可能比内容区小。

JavaScript 语法

CSS 属性也可通过一段 JavaScript 被动态地改变。

脚本语法:

object.style.clip="rect(0px,50px,50px,0px)"在我们的 HTML DOM 教程中,您可以找到更多有关 clip 属性 的细节。

在我们的 HTML DOM 教程中,您也可以找到完整的 Style 对象参考手册。

例子

img

{

clip: rect(10px, 5px, 10px, 5px)

}

值 描述

shape 设置元素的形状。合法的形状值是:rect (top, right, bottom, left)

auto 默认。浏览器可设置元素的形状。

可以通过设置偏移度来尽量让看上去 只有一个方向有阴影;

box-shadow: 0px 15px 0px #000

像这段代码,就只有下面这个方向有阴影;

第一个参数调整左右的阴影偏移

第二个参数调整上下的阴影偏移

第三个参数调整羽化半径

第三个是颜色