CSS shapes layout

I. Introduction & Index

CSS Shapes irregular layout can be realized surround text effects, and with the use of floating.

CSS shapes layout-related attributes are not many, learning costs than grid layout, a lot of small flex layout.

shapes layout related properties

• shape-outside
• shape-margin
• shape-image-threshold

Second, learn more about shape-outside

shape-outsideIrregular shape property values ​​surrounding the core layout, supported divided into the following four categories:

1. none - default value
2. <Shape-box> - graphic boxes.
3. <Basic-shape> - basic graphics functions.
4. <Image> - class image.

among them:

• noneWell understood, it is represented generally rectangular surround.
• <shape-box>(Graphic box) is a term associated layout shape than clip-pathattribute <geometry-box>(geometry box) support box to be less, the box is four kinds of basic box model in CSS2.1, are margin-box, border-box, padding-boxandcontent-box . To specify the text wrapping in accordance with an edge which, when the box is calculated.
• <basic-shape>It refers to the basic shape function, and the CSS  Clip-path basic shape function exactly tailoring the properties of the support.
• <image>Value is the image categories, including URL linked images, gradients, image, Cross-Fade (), Element () and so on. All of these images classes, CSS3 mask masking properties are also supported, this article will introduce common URL links and graded image, another image type is not described, are interested can visit this article describes a mask, it is fully displayed.

Different types of attribute values using a schematic (from the MDN ):

/* 关键字值 */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

/* 函数值 */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

/* <url>值 */
shape-outside: url(image.png);

/* 渐变值 */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);

1. Keyword property values

Testing HTML and CSS code is as follows:

<span class = "the Shape"> </ span> 
<the p-> Before the advent of CSS Shapes ... </ p>

---

.shape {

    float: left;
    width: 60px; height: 60px;
    padding: 10px; margin: 10px;
    border: 10px solid;
    border-radius: 50%;
    background-color: currentColor;
    background-clip: content-box;
    color: #cd0000;
    shape-outside: none;  /* 或margin-box，border-box，padding-box，content-box */
}

It can be seen that, when the shape-outsideattribute value nonethan when other keyword, even ordinary border-radiusrounded surround effect can be achieved.

2. The basic shape function

It refers to the following four basic shape functions:

• circle () - round
• ellipse () - Elliptic
• inset () - rectangular (including rounded rectangle)
• polygon () - Polygon

among them:

circle () - round
the following syntax:

circle( [<shape-radius>]? [at <position>]? )

Where the question mark  ? is a regular expression special characters, represent 0, and 1that is shape-radius(radius) and position(center position) are possible default expressed. Therefore, the following wording is legal:

shape-outside: circle();
shape-outside: circle(50%);
shape-outside: circle(at 50% 50%);
shape-outside: circle(50% at 50% 50%);
shape-outside: circle(50px at 50px 50px);