【CSS 遮挡和剪切属性 Masking】

CSS 遮挡和剪切属性 Masking

CSS 遮挡和剪切属性 Masking
- 1. CSS Masking 的基本概念
- 2. clip 属性: 设置绝对/固定定位元素的可见区域 (可指定四条剪切线的位置 , 已废弃，用 clip-path 替代)
- 3. clip-path 属性:设置元素的剪切区域 ( = 可见区域)
- ♣ 结束语和友情链接

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>

.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-boxwhere
<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-boxwhere
<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属性的宽度和高度值。

⑸ 剪切区域的浏览器支持
- Edge,IE 只支持url()定义的剪切路径。
- 谷歌需要浏览器前缀 -webkit-
- 示例1: 给一张图片设置剪切区域 / 可见区域。
html

    <img alt="" src="data:images/OrientalPearl.jpg" class="pearlimg">

.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);

♣ 结束语和友情链接

参考文档
- MDN CSS 教程

友情链接
- CSS Masking | MDN
- 【CSS 形状 (Shapes)】
- 【CSS 单位 (详细介绍)】

感谢：♥♥♥ 如果这篇文章对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
欢迎指正: 如果发现有需要更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭

支持作者: 持续更新中,❤ 您的每一分赞助，让作者走得更远。
- 可以备注支持的理由或想对作者说的话哦~
赞助二维码:

转载请评论告知作者并注明出处 ,Thanks♪(･ω･)ﾉ
- 作者：Hey_Coder
- 来源：CSDN
- 原文：https://blog.csdn.net/VickyTsai/article/details/103496346
- 版权声明：本文为博主原创文章，转载请评论告知作者并附上博文链接！

【CSS 遮挡和剪切属性 Masking】相关推荐

CSS中内容的剪切属性clip
1. 在CSS中,可以使用剪切属性对元素内容的可视化区域进行控制,剪切区域所使用的属性时clip属性, 用来裁剪元素的可视化区域,内容的剪切属性可以使用2种属性值,一种为auto值,另一种为区域值,语 ...
CSS动画——clip剪切动画
css中有一动画属性:clip 语法:clip: rect(top,right,bottom,left); 例:clip: rect(0px, 50px, 50px, 0px); 作用:实现剪切 ...
css text top,text-align属性(css中文本对齐属性)
text-align属性设置h1.h2.h3元素的文本对齐方法: h1{text-align:center} h2{text-align:left} h3{text-align:right} 亲自试 ...
css选择器匹配没有属性x的元素[重复]
本文翻译自:css selector to match an element without attribute x [duplicate] This question already has an ...
CSS和JS样式属性对照表
注意:1.在使用js时,如newTD.style.paddingLeft="200";(错误),正确生效的写法是newTD.style.paddingLeft="200p ...
CSS 详细解读定位属性 position 以及参数
Css 详细解读定位属性 position 以及参数 position 定位属性,是CSS中非常重要的属性.除了文档流布局,就是定位布局了.本来我对这个问题没有放在心上,毕竟写了这么多年的css,对p ...
可阅读性html css,css有继承性的属性有哪些？
继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.CSS继承是指设置上级(父级)的CSS样式,上级(父级)及以下的子级(下级)都具有此属性. 继承性的作用:给父元素设置一 ...
CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
Css3之基础-5 Css 背景、渐变属性
一.CSS 背景概述背景属性的作用 - 背景样式可以控制 HTML 元素的背景颜色.背景图像等 - 背景色 - 设置单一的颜色作为背景 - 背景图像 - 以图片作为背景 - 可以设置图像的位置.平铺 ...

【CSS 遮挡和剪切属性 Masking】

CSS 遮挡和剪切属性 Masking

CSS 遮挡和剪切属性 Masking

1. CSS Masking 的基本概念

2. clip 属性: 设置绝对/固定定位元素的可见区域 (可指定四条剪切线的位置 , 已废弃，用 clip-path 替代)

3. clip-path 属性:设置元素的剪切区域 ( = 可见区域)

♣ 结束语和友情链接

【CSS 遮挡和剪切属性 Masking】相关推荐

最新文章

热门文章

【CSS 遮挡和剪切属性 Masking】

CSS 遮挡和剪切属性 Masking

CSS 遮挡和剪切属性 Masking

1. CSS Masking 的基本概念

2. clip 属性: 设置 绝对/固定 定位元素的 可见区域 (可指定 四条剪切线的位置 , 已废弃，用 clip-path 替代)

3. clip-path 属性:设置元素的 剪切区域 ( = 可见区域)

♣ 结束语 和 友情链接

【CSS 遮挡和剪切属性 Masking】相关推荐

最新文章

热门文章

2. clip 属性: 设置绝对/固定定位元素的可见区域 (可指定四条剪切线的位置 , 已废弃，用 clip-path 替代)

3. clip-path 属性:设置元素的剪切区域 ( = 可见区域)

♣ 结束语和友情链接