CSS 学习笔记 - 形状环绕

tech2024-07-03  71

CSS 学习笔记 - 形状/环绕

形状clip-sourcebasic-shapegeometry-box 这个还没看懂先记一下形状效果 环绕shape-margin文字环绕效果 参考资料

形状

clip-path 矢量形状,显示区域。 语法:none | <clip-source> | [ <basic-shape> || <geometry-box> ]

选项说明none不创建的剪切路径clip-source用 url(#myShape)方式引用svg中定义形状的id: myShapebasic-shapecss支持的基础形状geometry-box为<basic-shape>定义边界盒。通过自定义,它将利用确定的盒子边缘包括任何形状边角(比如说,被 border-radius 定义的剪切路径)。

clip-source

使用 svg 形状。

<span class="svg">SVG</span> <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <clipPath id="myShape" clipPathUnits="objectBoundingBox"> <circle cx=".5" cy=".5" r=".5" /> </clipPath> <svg> .svg{ float:right; background-color:#0f0; width: 100px; height: 100px; clip-path: url(#myShape); }

basic-shape

basic-shape是一种表现基础图形的CSS数据类型,作用于clip-path 与 shape-outside 属性中。

函数功能语法inset()矩形inset( <四角坐标支持简写> [round <四圆角值支持简写>]? )例:inset(10% 10px);circle()圆形circle( [<半径>]? [at <圆心位置 position(缺省是盒子中心)>]? )例:circle(50% at center left);ellipse()椭圆ellipse( [<x轴半径, y轴半径。支持简写>]? [at <圆心位置 position(缺省是盒子中心)>]? )例:clip-path: ellipse(50% 25% at 50% 25%);polygon()多边形polygon( [<填充规则 fill-rule>,]? [<点1x,y> <点2x,y> … <点nx,y>]# ) 例:clip-path: polygon(50% 0, 80% 50%, 50% 100%, 20% 50%); 位置 position:left | center | right | top | bottom填充规则 filling rule :nonzero | evenodd 。用于有交错的路径。

geometry-box 这个还没看懂先记一下

如果同 一起声明,它将为基本形状提供相应的参考框盒。通过自定义,它将利用确定的盒子边缘包括任何形状边角(比如说,被 border-radius 定义的剪切路径)。几何框盒可以有以下的值中的一个:

选项说明margin-box使用 margin-box 作为引用框。padding-box使用 padding box 作为引用框。border-box使用 border box 作为引用框。content-box使用 content box 作为引用框。fill-box利用对象边界框作为引用框。stroke-box使用笔触边界框(stroke bounding box)作为引用框view-box使用最近的 SVG 视口(viewport)作为引用框

形状效果

https://codepen.io/jerryjin/pen/oNxyNxO

环绕

shape-outside 定义外边,控制文字环绕。支持带透明的PNG。 语法:none | <shape-box> || <basic-shape> | <image>

为了让文字环绕,需要先将形状设置为浮动 选项说明none无环绕效果<image>根据图片的非透明区域计算边界。类似于shape-image-threshold<basic-shape>基于给定的基础图形计算浮动区域。如果存在 <shape-box>那么会定义边界盒,默认方式margin-box 。<shape-box>根据浮动元素的边缘形状计算出浮动的区域。包括了由 border-radius 属性制造出来的圆角。

<shape-box>选项说明margin-box外边距环绕padding-box内边距环绕border-box边线环绕content-box内容环绕

shape-margin

shape-margin 用于设定由shape-outside创建的 CSS 形状的外边距。

支持长度(数值+单位)or百分比不支持负数

文字环绕效果

https://codepen.io/jerryjin/pen/yLOEKOX

参考资料

MDN:CSS属性值定义语法 MDN:CSS_Shapes 形状 MDN:CSS_basic-shape 基础形状 MDN:CSS_Masking 遮罩 在剪辑和遮罩中的形状-以及如何使用它们

最新回复(0)