详解CSS Masking模块之Clipping
|
none ：未创建任何剪切区域 <basic-shape> ：CSS中绘制基本形状的函数，常见的函数有 inset() 、 circle() 、 ellipse() 、 polygon() 、 url() 和 path() <geometry-box> ：如同 <basic-shape> 一起声明，它将为 <basic-shape> 提供相应的参考框盒子。通过自定义，它将利用确定的盒子边缘包括任何形状边角（比如说，被 border-radius 定义的剪切路径） <geometry-box> 提供的框盒模式主要有： margin-box ：使用 margin box 作为引用框。其主要由 margin 的外部边缘包围的形状。这种形状的圆角半径由相应的 border-radius 和 margin 的值来决定。如果 border-radius 和 margin 的比是 1 或更大，则边距框（ margin-box ）的半径是 border-radius + margin 。反之，如果两者的比小于 1 ，那么边距框的半径是 border-radius + (margin * (1 + (ratio-1)^3)) （ ratio 是 border-radius 和 margin 的比，即 border-radius / margin ） border-box ：使用 border box 作为引用框。定义了 border 外部边缘包围的形状，此形状遵循 border 外部边缘所有常规的 border-radius 规则 padding-box ：使用 padding box 作为引用框。定义了 padding 外部边缘包围的形状，此形状遵循 padding 外部边缘所有常规的 border-radius 规则 content-box ：使用 content box 作为引用框。定义了 content 外部边缘包围的形状，此框的每个 border-radius 都大于 0 或 border-radius - border-width - padding fill-box ：利用对象边界框作（ Object bounding box ）为引用框 stroke-box ：使用笔触边界框（ Stroke bounding box ）作为引用框 view-box ：使用最近的 SVG视窗（Viewport） 作为引用框。如果 viewBox 属性被指定来为元素创建SVG视窗，引用框将会被定位在坐标系统的原点，引用框位于由 viewBox 属性建立的坐标系的原点，引用框的尺寸用来设置 viewBox 属性的宽和高 如果是一个HTML元素被剪切，可以使用 margin-box 、 border-box 、 padding-box 或 content-box 框盒模式；如果运用于一个SVG元素上，可以使用 fill-box 、 stroke-box 或 view-box 。 先来看绘制基本函数的使用。 inset() inset() 用来绘制矩形，或者带圆角的矩形。 clip-path: inset( <length-percentage>{1,4} [ round <'border-radius'> ]? ) <length-percentage> 用来设置剪切区域距离上、右、下和左侧外边缘的距离；可以设置一个、两个、三个或四个值。 如果设置一个值，表示上右下左四个值相等；如果设置两个值，表示上下取第一个值，左右取第二个值；如果取值三个值，表示上取第一个值，左右取第二值，下取值第三个值； 如果取值四个值，表示上取第一个值，右取第二个值，下取第三个值，左取第四个值。类似于 border 的取值 round 用来设置裁剪区域是否带圆角，未显式设置表示剪切区域没有圆角，如果设置表示剪切区域带有圆角 <border-radius> 用来设置 border-radius 的半径值，其使用和CSS的 border-radius 一样，也可以带 / 用张图来表示： 来看个Demo： circle() circle() 用来绘制圆。 clip-path: circle(<shape-radius> at posX posY) <shape-radius> ：圆的半径，其值可以是 <length-percentage> 、 closest-side 、 farthest-side at ：显式的设置圆心的位置，如果未显式设置，默认的圆心在元素的正中间，即 center （ 50% 50% ） posX posY ：设置圆心位置， posX 是 x 轴的位置， posY 是 y 轴的位置，取值可以类似于 background-position ellipse() ellipse() 用来绘制椭圆： clip-path: ellipse( [ <shape-radius>{2} ]? [ at <position> ]? ) <shape-radius> ：椭圆的半径，其值可以是 <length-percentage> 、 closest-side 、 farthest-side ，如果只取一个值的时候，表示 x 轴和 y 的半径值是一样的 at ：显式的设置圆心的位置，如果未显式设置，默认的圆心在元素的正中间，即 center （ 50% 50% ) <position> ：即 posX posY ，用于设置圆心位置，如果未显式设置，其圆心在元素正中间 (center) 即 50% 50% ，其使用类似于 background-position polygon() polygon() 主要用来绘制不规则的多边形： clip-path: polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# ) <fill-rule> ：填充规则，后面介绍 clip-rule 规则会细节，具体解释可以阅读 fill-rule <length-percentage> <length-percentage> 设置多边形点的位置 一个多边形至少会有三个点组成，比如简单的三角形，如果使用 polygon() 来绘制一个三角形的话，那么就会有三对坐标点，每对之间用一个 , 分隔，比如：
（编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |