当前位置：首页 > 编程日记 > 正文

css 形状_在CSS形状之外思考

编程日记 2024-08-13 21:30:00

css 形状

CSS is based off a box model. If you have an image that is a circle that you want to wrap text around, it will wrap around the images’ bounding box.

CSS基于盒模型。如果您要环绕的图像是一个圆，则它将环绕图像的边界框。

外型 (Shape-outside)

A new CSS property called shape-outside lets you wrap text that conforms to the shape of your image.

一个名为shape-outside的新CSS属性使您可以包装符合图像形状的文本。

什么是外形 (What is shape-outside)

Shape-outside is a new CSS property that changes the shape of items that are wrapped. Instead of being limited to a rectangular bounding box around the image, shape-outside allows us to shape content to fit the image.

Shape-outside是一个新CSS属性，可更改包装物品的形状。不仅限于图像周围的矩形边界框，还可以通过形状外部使内容的形状适合图像。

Here is how MDN describes shape-outside:

这是MDN描述外部形状的方式：

The shape-outside CSS property uses shape values to define the float area for a float and will cause inline content to wrap around the shape instead of the float’s bounding box.
shape-outside CSS属性使用形状值来定义浮动对象的浮动区域，并将导致内联内容环绕形状而不是浮动对象的边界框。

The most important take away from that description is this new property applies to images that uses a float. The CSS shape-outside property controls how text wraps around any floated image. The text that is wrapped can take the shape of a circle, ellipse, rectangle or polygon.

该描述最重要的一点是，此新属性适用于使用浮点数的图像。 CSS shape-outside属性控制文本如何环绕任何浮动图像。换行的文本可以采用圆形，椭圆形，矩形或多边形的形状。

使用形状外 (Using shape-outside)

The shape-outside property takes a “basic shape” and applies a shape function to it. The shape function is used to change the shape of the float area of the shape. The CSS shape-outside property provides functionality to create these shape functions:

外部形状属性采用“基本形状”并对其应用形状函数。形状函数用于更改形状的浮动区域的形状。 CSS shape-outside属性提供创建以下形状函数的功能：

circle
圈
ellipse
椭圆
polygon
多边形
rectangle
长方形
url
网址

The image can be positioned with these values. The values are appended to the end:

可以使用这些值来定位图像。这些值将附加到末尾：

margin-box
边距框
padding-box
填充盒
border-box
边框

The image must have intrinsic dimensions. You must set the height and width of the element. This will be used by the shape function to create a coordinate system that is used when wrapping text around the image.

图像必须具有固有尺寸。您必须设置元素的高度和宽度。形状函数将使用它来创建坐标系，该坐标系在将文字环绕图像时使用。

圈 (Circle)

Circle() is one of the functional values provided with shape-outside. The full notation for circle() is circle(r at cx cy) where r is the radius of the circle and cx and cy are the coordinates for the center of the circle. If you omit them, the center of the image will be used as the default values.

Circle()是shape-outside提供的功能值之一。 circle()的完整符号为circle( r在cx cy处) ，其中r是圆的半径，而cx和cy是圆心的坐标。如果省略它们，则图像的中心将用作默认值。

Here is an example of using shape-outside on a circle:

这是在圆上使用形状外部的示例：

.circle {    height: 200px;    width: 200px;    border-radius: 50%;    background-color: #7db9e8;    margin: 0 25px 5px 0;    float: left;    -webkit-shape-outside: circle();    shape-outside: circle();}

椭圆 (Ellipse)

Ellipse is a variation of the circle where the item is elongated on either the horizontal or vertical axis. The full notation for ellipse() is ellipse(rx ry at cx cy) where rx and ry are the radii for the ellipse and cx and cy are the coordinates for the center of the ellipse.

椭圆是圆的一种变化形式，其中商品在水平或垂直轴上都被拉长。 ellipse()的完整符号为ellipse( 在cx cy处为rx ry ) ，其中rx和ry是椭圆的半径，而cx和cy是椭圆中心的坐标。

Here is an example of using shape-outside on the ellipse:

这是在椭圆上使用形状外部的示例：

.ellipse {    width: 100px;    height: 200px;    border-radius: 50%;    background-color: #7db9e8;    margin: 0 25px 5px 0;    float: left;    -webkit-shape-outside: ellipse(50px 100px at 50% 50%);    shape-outside: ellipse(50px 100px at 50% 50%);}

多边形 (Polygon)

The polygon function provides an unlimited range of shapes. The full notation for polygon() is polygon(x1 y1, x2 y2, …) where each pair specifies the x y coordinates for a vertex of the polygon. To use the polygon() function you must specify a minimum of 3 pairs of vertex.

多边形功能可提供无限范围的形状。 polygon()的完整表示法是polygon(x1 y1，x2 y2，…) 其中每对指定多边形顶点的xy坐标。要使用polygon()函数，您必须至少指定3对顶点。

Polygon is used with a clip-path. The clip-path CSS property creates a clipping region that defines what part of an element should be displayed. Anything inside the region is displayed, while those outside are hidden.

多边形与剪切路径一起使用。 clip-path CSS属性创建一个裁剪区域，该区域定义应显示元素的哪一部分。将显示区域内的所有内容，而隐藏外部的内容。

Here is an example of using shape-outside to create two triangle shapes and the text flows between them:

这是一个使用shape-outside创建两个三角形的示例，文本在它们之间流动：

.leftTriangle {    width: 150px;    height: 300px;    background-color: #7db9e8;    margin: 0 25px 5px 0;    float: left;    -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%);    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);    -webkit-shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);    shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);}.rightTriangle {    width: 150px;    height: 300px;    background-color: #7db9e8;    margin: 0 0 5px 25px;    float: right;    -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%);    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);    -webkit-shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);    shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);}

浏览器支持 (Browser Support)

The CSS shape-outside is supported primarily by Chrome, Opera and Safari.

Chrome，Opera和Safari主要支持CSS形状外功能。

获取代码 (Get the Code)

The code for all of the examples can be found in my github repo here.

所有示例的代码都可以在我的github仓库中找到。