CSS 遮挡和剪切属性 Masking
CSS 遮挡和剪切属性 Masking
用于 | 属性名 | CSS 版本 |
---|---|---|
① 设置 绝对/固定 定位元素的 剪切区域 = 可见区域 (可指定 四条剪切线的位置 , 已废弃,用 clip-path 替代) 。 | clip | 2 |
② 设置元素的 剪切区域 ( = 可见区域)。适用范围更广。 | clip-path | 2 |
1. CSS Masking 的基本概念
- ⑴ CSS Masking : ⇒ 隐藏元素 的方法。
- ① 隐藏元素: 是一个 CSS 模块,它定义了 部分或全部 隐藏 可见元素的方法,包括 ❶ 遮挡和 ❷ 裁剪。
- ② 相关属性
- ❶
clip
- ❷
clip-path
- ❸ clip-rule (svg 中应用)
- 只用于包含在
<clipPath>
元素中的 图形元素。
- 只用于包含在
- ❹
mask
(此属性和子属性的浏览器支持度 还不好,都是部分支持,属性是可识别的,应用于其上的值没有任何作用。以下属性 详细介绍 ,以后根据需要 再补上。)- mask-border
- mask-border-mode
- mask-border-outset
- mask-border-repeat
- mask-border-slice
- mask-border-source
- mask-border-width
- mask-clip
- mask-composite
- mask-image
- mask-mode
- mask-origin
- mask-position
- mask-repeat
- mask-size
- mask-type
- ❶
2. clip 属性: 设置 绝对/固定 定位元素的 可见区域 (可指定 四条剪切线的位置 , 已废弃,用 clip-path 替代)
- ⑴ 剪切 绝对/固定定位的元素:
clip
属性- ① 可见区域:
clip
属性定义了 元素的哪一部分 是可见的。- 可指定 四条剪切线的位置 ⇒ 上下/左右剪切线 中间的区域 = 可见区域。
- ② 适用对象:
- 只适用于 ❶ 绝对定位元素 =
position:absolute
的元素和 ❷ 固定定位的元素position:fixed
(固定定位,也算是 某种绝对定位)。
- 只适用于 ❶ 绝对定位元素 =
- ③ 已废弃
- 该特性 已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性。
- ① 可见区域:
- ⑵ 剪切的 语法
clip: rect(top,right,bottom,left)|auto|inherit;
<shape> | auto
where
<shape> = rect(<top>, <right>, <bottom>, <left>)
/* 关键字值 Keyword value */
clip: auto;
/* 矩形值,要带单位 可用空格符或逗号 分隔 <shape> values
空格分隔: 向后兼容的语法*/
clip: rect(1px 10em 3rem 2ch);
clip: rect(1px, 10em, 3rem, 2ch);
/* 全局值 Global values */
clip: inherit;
clip: initial;
clip: unset;
- ⑶ 剪切的 属性值
- ① 不剪切(默认值):
auto
- 浏览器 设置元素的形状。
- ≠ 这与
rect(auto, auto, auto, auto)
不同,rect()
会剪切到 元素的边框的内边界。
- ② 可见区域 (剪切线的位置):
rect()
- 合法的形状值是:
- ❶
rect(<top>, <right>, <bottom>, <left>)
- ❷
rect(<top> <right> <bottom> <left>)
- ❶
<top>
,<right>
,<bottom>
,<left>
的取值- ❶ 长度值
<length>
或 ❷auto
.。
- ❶ 长度值
- 偏移量 = 剪切线的位置
- 设置剪切的区域 偏移量 ,和 绝对定位的位置 偏移量 无关 ,只和元素本身的 整体宽高 有关。
- 剪切位置 相对于: 相对 元素的 左边框 和 上边框 的距离。
<top>
和<bottom>
- 相对于盒子 上边框边界 的偏移量 = 剪切线的位置。
- 相对于盒子 上边框边界 的偏移量 = 剪切线的位置。
<right>
和<left>
- 相对于盒子 左边框边界 的偏移量 = 剪切线的位置。
- 元素的 整体宽高
- 元素的 整体高度 = 上下边框+上下内边距+高度 (外边距透明,此处 不含外边距)
- 元素的 整体宽度 = 左右边框+左右内边距+宽度 (外边距透明,此处 不含外边距)
- ❶ 上
top
= 上方 会剪切掉的距离 (从上往下剪切) 。- 最大值: 不能超过 元素的整个高度,否则会整个剪切掉。
- 显示上边框 ⇒ 设置
top
=0px
- ❷ 下
bottom
= 距离 上边框外边界的距离 。- 下方被剪切的距离 = 整个元素高度 -
bottom
的值 (负值 表示不剪切) - 显示下边框 ⇒ 设置
bottom
= 元素的 整个高度 。- 小于 这个值,意味着 距离上边框更近, 从下往上剪切 一部分。
- 下方被剪切的距离 = 整个元素高度 -
- ❸ 左
left
= 左边 会剪切掉的距离 。- 最大值: 不能超过 元素的整个宽度,否则会整个剪切掉。
- 显示左边框 ⇒ 设置
left
=0px
- ❹ 右
right
= 距离 左边框外边界的距离 。- 右方被剪切的距离 = 整个元素宽度 -
right
的值 (负值 表示不剪切) - 显示下边框⇒ 设置
right
= 元素的整个宽度 。
- 右方被剪切的距离 = 整个元素宽度 -
- 合法的形状值是:
- ① 不剪切(默认值):
- ⑷ 剪切区域的 浏览器支持
- 示例1: 定义一个定位元素 进行剪切
- 剪切线的位置 相对于: 是相对于 元素的 左边框和上边框的距离。
- 剪裁区域和内容区: 取决于 剪切线的位置。
- 可能 比元素的内容区大
- 也可能 比内容区小。
- html
<!--定位元素和剪切区域-->
<div class="posiancestor">
<p class="position red">古人学问无遗力,</p>
<p class="position green">少壮工夫老始成。</p>
<p class="position red">纸上得来终觉浅,</p>
<p class="position green absolute">绝知此事要躬行。</p>
</div>
- css
.red {
background-color: indianred;
/*margin: 10px;*/
margin: 10px;
}
.green {
background-color: lightseagreen;
margin: 10px;
}
/*去除各浏览器的 默认内外边距*/
* {
margin: 0;
padding: 0;
}
/*元素的包含块*/
.posiancestor {
position: relative;
top: 40px;
left: 40px;
margin: 10px;
border: solid 10px;
padding: 10px;
width: 50%;
}
.position {
/* 设置宽高 */
width: 150px;
height: 50px;
text-align: center;
/*文字垂直居中: line-height = height*/
line-height: 50px;
border: solid 10px;
margin: 5px;
padding: 5px;
}
.absolute {
/*设置 绝对定位类型*/
position: absolute;
top: 100px;
left: 360px;
/*z-index:-1;*/
/* 设置 剪切线的位置 */
clip: rect(0px, 180px, 80px, 0px);
clip: rect(10px, 180px, 80px, 10px);
}
clip: rect(10px, 180px, 80px, 10px);
- ⑴ 显示出来的部分= 上下 两条剪切线中间的部分 和 左右 两条剪切线中间的部分
- ① 上边的 剪切线位置
- 距离 元素的上边框
10px
的位置 开始剪切 (上边会被剪切10px
)。
- 距离 元素的上边框
- ② 右边的 剪切线位置
- 距离 元素左边框
180px
的位置 开始剪切 。 180px
= 左右边框+左右内边距+宽度 =10*2
+5*2
+150
=180px
- 距离 元素左边框
- ③ 下边的 剪切线位置
- 距离 元素的上边框
80px
的位置 开始剪切。 80px
= 上下边框+上下内边距+高度 =10*2
+5*2
+50
=80px
- 距离 元素的上边框
- ④ 左边的 剪切线位置
- 距离 元素左边框
10px
的位置 开始剪切。
- 距离 元素左边框
- ⑵
clip: rect(auto, auto, auto, auto);
- 四条剪切线的位置 都是
auto
= 被剪切到该边的边框 = 边框和以内的内容 都可见。
- 四条剪切线的位置 都是
3. clip-path 属性:设置元素的 剪切区域 ( = 可见区域)
- ⑴ 设置 元素的剪切区域 (可见区域):
clip-path
- ① 剪切区域
- 元素可见部分:
clip-path
属性创建一个 裁剪区域,用于设置 应显示 元素的哪个部分。 - 可见和隐藏: 剪切区域内的 部分显示,区域外的隐藏。
- 元素可见部分:
- ② 属性替代
clip-path
属性 代替了 现在已经弃用的剪切clip
属性。
- ③ 适用对象
- 所有元素;
- 在 SVG 中,它适用于 容器元素,但不包括
defs
元素和 所有图形元素。
- ① 剪切区域
- ⑵ 剪切区域的 语法
clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none;
/* 关键字值 Keyword values */
clip-path: none;
/* <clip-source> values */
clip-path: url(resources.svg#c1);
/* 几何框/盒 值<geometry-box> values */
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
/* 基本形状的 形状函数值 <basic-shape> values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
/* 同时设置 形状值 和 参考框 Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);
/* 全局盒子 Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;
<clip-source> | [ <basic-shape> || <geometry-box> ] | none
where
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box
where
<inset()> = inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )
<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )
<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
<shape-box> = <box> | margin-box
where
<length-percentage> = <length> | <percentage>
<shape-radius> = <length-percentage> | closest-side | farthest-side
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<fill-rule> = nonzero | evenodd
<box> = border-box | padding-box | content-box
- ⑶ 剪切区域的 取值
clip-path
属性 被指定为 下面列出的一 个或多个值 的组合。
- ⑷ 剪切区域的 属性值
- Ⅰ.不创建剪切 (默认值):
none
- 不创建 剪切路径。
- Ⅱ. 引用
svg
的[<clipPath>
元素:<clip-source>
- 一个
<url>
值 = 引用 SVG 的 一个<clipPath>
元素。 - 可缩放 矢量图形(
Scalable Vector Graphics
,SVG
)- 是一种用于 描述基于二维的矢量图形的,基于
XML
的标记语言。
- 是一种用于 描述基于二维的矢量图形的,基于
- 相对于图像: 本质上,SVG 相对于图像,就好比 HTML 相对于文本。
- 一个
- Ⅲ. 形状函数:
<basic-shape>
- 形状,其大小和位置 由
<geometry-box>
的值定义。 - 剪切区域的默认参考盒:
- 如果没有指定 几何框,则 ❶ 边框盒(
border-box
) 将用作 参考框/盒子。
- 如果没有指定 几何框,则 ❶ 边框盒(
- 形状函数:
inset()>
,circle()
,ellipse()
,polygon()
,path()
。- 详情参见: 【CSS 形状 (Shapes)】
- 形状,其大小和位置 由
- Ⅳ. 几何框:
<geometry-box>
- 参考框:
- 如果与
<basic-shape>
组合指定,此值将 指定 形状函数的 参考框。
- 如果与
- 剪切路径:
- 如果由它自己指定,它将使 ❶ 指定框的 边界 (包括任何 ❷ 圆角的形状,边框半径
border-radius
)成为 裁剪路径。
- 如果由它自己指定,它将使 ❶ 指定框的 边界 (包括任何 ❷ 圆角的形状,边框半径
- 几何框/盒 可以是以下值之一:
- 盒模型中的 4个值 作为形状值⇒ 详情参见: 【CSS 形状 (Shapes)】
- ❶
content-box
- ❷
padding-box
- ❸
border-box
- ❹
margin-box
- ❶
- ❺ 对象边界框:
fill-box
(属性值 浏览器支持度很差)- 用 对象边界框(
object bounding box
) 作为 参考框。
- 用 对象边界框(
- ❻ 笔触边界框:
stroke-box
(属性值 浏览器支持度很差)- 用 笔触边界框(
stroke bounding box
)作为 参考框。
- 用 笔触边界框(
- ❼ 最近的 svg 视窗:
view-box
- 使用最近的 SVG 视口(
viewport
)作为 参考框。 - 如果
viewBox
属性 ⇒ 被指定来为元素 创建 SVG 视口- 参考框位置: 参考框 将会被定位在 坐标系的原点⇒ 参考框 位于由
viewBox
属性 建立的 坐标系的原点 - 参考框 的尺寸: 被设置为
viewBox
属性的 宽度和高度值。
- 参考框位置: 参考框 将会被定位在 坐标系的原点⇒ 参考框 位于由
- 使用最近的 SVG 视口(
- 盒模型中的 4个值 作为形状值⇒ 详情参见: 【CSS 形状 (Shapes)】
- 参考框:
- Ⅰ.不创建剪切 (默认值):
-
⑸ 剪切区域的 浏览器支持
- Edge,IE 只支持
url()
定义的剪切路径。 - 谷歌需要浏览器前缀
-webkit-
- 示例1: 给一张图片设置 剪切区域 / 可见区域。
- Edge,IE 只支持
-
html
<img alt="" src="images/OrientalPearl.jpg" class="pearlimg">
- css
.pearlimg {
border: solid 5px lightskyblue;
margin: 10px;
padding: 10px;
width: 300px;
height: 200px;
border-radius: 20%;
background-color: #8fffdf;
/*浮动*/
/*float: left;*/
/*设置 剪切区域的形状*/
clip-path: none;
clip-path:margin-box;
clip-path:border-box;
clip-path:padding-box;
clip-path:content-box;
/*-webkit-clip-path:content-box;*/
/*clip-path: inset(0% 0% 0px 0px);!*各边都不剪切*!*/
clip-path: inset(10% 10% 10px 10px); /*各边 剪切掉一部分*/
clip-path: inset(10% 10% 10px 10px round 50% 50%); /*各边 剪切掉一部分,被剪切的区域 设置圆角,不是原来的边框设置圆角*/
/*圆形*/
clip-path:circle();
/*clip-path:circle(at 50% 50%);*/
/*clip-path:circle(50% at 50% 50%);*/
/*clip-path:circle(60% at 50% 50%);*/
/*clip-path:circle(100px at 50% 50%);*/
/*clip-path:circle(100px at 50% 50%);*/
/*clip-path:circle(40% at 60% 50%);*/
clip-path:circle(closest-side);
/*clip-path:circle(closest-side at 50% 70%);*/
/*clip-path:circle(farthest-side);*/
/*椭圆形*/
/*clip-path: ellipse(100px 100px);*/
/*clip-path: ellipse(100px 100px at 50% 50%);*/
/*clip-path: ellipse(100px 50px);*/
/*clip-path: ellipse(100px 50px at 30%);!*圆心位置 只有一个,就是 横向位置,纵向默认50%*!*/
clip-path: ellipse(100px 50px at 30% 50%);
/*clip-path: ellipse(100px 50px at 30% 70%);*/
/*clip-path: ellipse(closest-side closest-side at 50% 50%);*/
/*clip-path: ellipse(farthest-side farthest-side at 50% 50%);*/
/*clip-path: ellipse(closest-side closest-side at 30% 70%);*/
/*clip-path: ellipse(farthest-side farthest-side at 30% 70%);*/
/*多边形*/
clip-path: polygon(100px 10px , 200px 100px, 0px 100px); /*三个点坐标 = 三角形*/
/*clip-path: polygon(100px 10px , 200px 100px, 0px 100px,100px 200px); !*因为点的路线,四个点 = 两个相连的三角形*!*/
/*clip-path: polygon(evenodd, 100px 10px , 200px 100px,100px 200px, 0px 100px);*/
/*clip-path: polygon(100px 10px , 200px 100px,100px 200px, 0px 100px); !*四个点 = 四边形*!*/
}
-
① 默认显示 = 无剪切 =
clip-path: none;
-
② 外边距边界 作为剪切路径:⇒ 外边距, 边框以内都在。(存疑: 盒模型中的 4 个值,在谷歌中测试 无效果。)
clip-path:margin-box;
-
③ 边框的边界 作为剪切路径⇒ 边框以内都在。
clip-path:border-box;
-
④ 以内边距边界 为剪切路径⇒ 内边距区以内都在 (存疑: 图中4个角的 边框 没有被剪切干净)
clip-path:padding-box;
-
⑤ 以内容区边界 为剪切路径⇒ 内容区以内 都在。(存疑: 四个圆角 没有剪切干净,还是矩形)
clip-path:content-box;
-
⑥ 矩形剪切: 各边都向内 剪切掉一部分
clip-path: inset(10% 10% 10px 10px);
-
⑦ 矩形剪切: 并把 剪切区域 设置成圆角的。
clip-path: inset(10% 10% 10px 10px round 50% 50%);
-
⑧ 设置成 默认的圆形
clip-path:circle();
=clip-path:circle(closest-side);
-
⑨半径关键字不变 + 改变圆心的位置⇒ 剪切区域变化
clip-path:circle(closest-side at 50% 70%);
-
⑩ 剪切成 椭圆形
clip-path: ellipse(100px 50px at 30% 50%);
-
⑪ 剪切成 三角形
clip-path: polygon(100px 10px , 200px 100px, 0px 100px);
♣ 结束语 和 友情链接
- 参考文档
- 感谢:♥♥♥ 如果这篇文章 对您有帮助的话,可以点赞、评论、关注,鼓励下作者哦,感谢阅读 ~
- 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮( ̄▽ ̄)╭
- 支持作者: 持续更新中,❤ 您的每一分赞助,让作者走得更远。
- 可以备注 支持的理由 或 想对作者说的话哦~
- 可以备注 支持的理由 或 想对作者说的话哦~
- 赞助二维码:
- 转载 请评论告知作者 并注明出处 ,Thanks♪(・ω・)ノ
- 作者:Hey_Coder
- 来源:CSDN
- 原文:https://blog.csdn.net/VickyTsai/article/details/103496346
- 版权声明:本文为博主原创文章,转载 请评论告知作者 并附上博文链接!