CSS clip-path 属性
最后更新于:2022-03-27 03:02:27
CSS clip-path 属性
属性定义及使用说明
clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。可以指定一些特定形状。
注意: clip-path 属性将替换已弃用的 clip 属性。
默认值: | none |
---|---|
继承: | no |
动画: | 支持。 阅读关于 animatable 尝试一下 |
版本: | CSS 屏蔽模块级别 1 |
JavaScript syntax: | object.style.clipPath=”circle(50%)” 尝试一下 |
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
属性 | |||||
---|---|---|---|---|---|
clip-path | 55.0 23.0 -webkit- |
79.0* | 54.0 | 9.1 6.1 -webkit- |
42.0 15.0 -webkit- |
语法
clip: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none|initial|inherit;
属性值
值 | 描述 |
---|---|
clip-source | 用 URL 表示剪切元素的路径 |
basic-shape | 将元素裁剪为基本形状:圆形、椭圆形、多边形或插图 |
margin-box | 使用外边距框作为引用框 |
border-box | 使用边框作为引用框 |
padding-box | 使用内边距框作为引用框 |
content-box | 使用内容框作为引用框 |
fill-box | 使用对象边界框作为引用框 |
stroke-box | 使用笔触边界框(stroke bounding box)作为引用框 |
view-box | 使用最近的 SVG 视口(viewport)作为引用框。 |
none | 这是默认设置。 没有剪辑 |
initial | 设置属性为默认值。 阅读关于 initial |
inherit | 属性值从父元素继承。 阅读关于 inherit |