CSS3 Dry Goods 20: Formas y aplicaciones en CSS3

1. Forma

La aparición de Shape rompió la vergüenza del CSS tradicional de que solo se usaban formas rectangulares para diversificar nuestras formas.

Utilice la siguiente estructura y estilo como descripción del caso base:

<div class="txtBox">
   <div class="txtBox_content">
       <p>
           小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。
       </p>
       <p>
           “小说”出自《庄子·外物》。
       </p>
       <p>
           人物、情节、环境是小说的三要素。情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。环境包括自然环境和社会环境。 小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代、爱情、家庭伦理篇、浪漫青春、游戏竞技等。按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。
       </p>
       <p>
           “小说”一词最早出现于《庄子·外物》：「饰小说以干县令，其于大达亦远矣。」庄子所谓的「小说」，是指琐碎的言论，与小说观念相差甚远。直至东汉桓谭《新论》：「小说家合残丛小语，近取譬喻，以作短书，治身理家，有可观之辞。」班固《汉书．艺文志》将「小说家」列为十家之后，其下的定义为：「小说家者流，盖出于稗官，街谈巷语，道听途说者之所造也。」才稍与小说的意义相近。而中国小说最大的特色，便自宋代开始具有文言小说与白话小说两种不同的小说系统。文言小说起源于先秦的街谈巷语，是一种小知小道的纪录。
       </p>
   </div>
</div>

*{  margin: 0; padding: 0;}
.txtBox{
    width: 600px;
    height: 600px;
    background: #eee;
    margin-right: auto;
    margin-left: auto;
}
.txtBox_content{
    width: 600px;
    height: 600px;
    background: #999;
}

1. Valor de forma

Muchas referencias lo llaman <basic-shape>, yo prefiero llamarlo forma de valor , porque es la definición de una forma , se puede usar como valor de atributo clip-patho shape-outsideen la propiedad.

Los posibles datos son:

（1） recuadro ()

inset()La función especifica un área rectangular dentro de la forma . Sus parámetros son 4 valores de compensación y ángulos redondos opcionales.

 inset( <shape-arg>{1,4} [round <border-radius>]? )

La siguiente es la forma correcta de escribir inset ():

inset(10% 20% round 5px) 
/*一个带5像素圆角的矩形，上下2条边向内10%，左右2条边向内20%*/
inset(15px 20px 30px)  /* 上边距   左右边距  下边距 */
inset(25% round 10px 30px) 
inset(10px 20px 30px 40px round 10px) 

como:

.txtBox_content{
    clip-path: inset(10% 20% 10% round 10%);
}

（2） círculo ()

circle()La función se usa para definir un círculo .

circle() = circle( [<shape-radius>]? [at <position>]? )
/* where.. */
<shape-radius> = <length> | <percentage> | closest-side | farthest-side

<shape-radius>El parámetro se utiliza para especificar el radio del círculo . El radio también se puede especificar mediante dos palabras clave: closest-sidey furthest-side.

<position>El parámetro se usa para especificar el centro del círculo , el predeterminado es el centro exacto.

Si no se especifica ningún parámetro, sí closest-side, y el centro exacto está predeterminado.

La siguiente es la forma correcta de escribir circle ():

circle(); 
/* 使用默认值：圆形使用closest-side作为半径，圆形位于元素的中心 */
 
circle(100px at 30% 50%); 
/* 圆形的半径为100像素，位于元素的水平30%，垂直50%的位置 */
 
circle(farthest-side at 25% 25%); 
/* 圆形的半径为最远边的一半，位于元素的水平25%，垂直25%的地方 */
 
circle(10em at 500px 300px); 

como:

.txtBox_content{
    clip-path: circle();
}

（3） elipse ()

ellipse()La función se utiliza para definir una elipse .

ellipse() = ellipse( [<shape-radius>{2}]? [at <position>]? )
/* 其中... */
<shape-radius> = <length> | <percentage> | closest-side | farthest-side

Sus parámetros son los mismos que los de la función circle () .

<shape-radius>El parámetro se utiliza para especificar el radio de la elipse. Puede especificar 2 valores de radio: rx y ry, que representan el radio del eje X y el radio del eje Y de la elipse, respectivamente.

La siguiente es la forma correcta de escribir elipse ():

ellipse() 
/* 使用默认值 */
 
ellipse(100px 50px at 30% 50%) 
/* 椭圆形的X轴半径100像素，Y轴半径50像素。圆心位于水平30%，垂直50%的地方 */
 
ellipse(farthest-side closest-side at 25% 25%) 
/* 椭圆形的X轴半径为farthest-side，Y轴半径为closest-side。圆心位于水平25%，垂直25%的地方 */
 
ellipse(10em 10em at 500px 300px) 
/* 椭圆形的X轴半径和Y轴半径都为10em。圆心位于水平500像素，垂直300像素的地方 */

como:

.txtBox_content{
    clip-path: ellipse(50% 20%);
}

（4） polígono ()

polygon()La función se usa para definir un polígono .

polygon() = polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
/* 其中.. */
<shape-arg> = <length> | <percentage>

polygon()El parámetro de es un conjunto de pares de coordenadas ( <shape-arg> <shape-arg>) y cada par de coordenadas representa una coordenada de vértice del polígono. El navegador conectará el último vértice y el primer vértice para obtener un polígono cerrado. Los pares de coordenadas están separados por comas y se pueden utilizar valores de unidad absoluta o unidad de porcentaje.

Además de los parámetros del par de coordenadas, la polygon()función también puede utilizar una palabra clave opcional fill-rule. Esta palabra clave especifica cómo tratar áreas de formas poligonales que pueden cruzarse. Los valores posibles son nonzerosuma evenodd. El valor predeterminado es nonzero.

Las siguientes son todas polygon()declaraciones de funciones válidas .

polygon(0 0, 100% 100%, 0 100%)
polygon(0 0, 100% 100%, 0 100%)
polygon(50px 0px, 100px 100px, 0px 100px)
polygon(evenodd, 446.33px 452.00px, 443.63px 246.82px, 389.92px 245.63px )

como:

.txtBox_content{
    clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%, 50% 81.3%, 80.9% 97.6%, 75% 63.1%, 100% 38.8%, 65.5% 33.8%);
}

2. Aplicación de forma: clip-path

clip-path , atributo de recorte, utilizado para especificar un valor de forma , una ruta SVG en línea o externa como la ruta de recorte para recortar el elemento.

Se mostrará el contenido del área recortada, pero no se mostrará el contenido que no esté en esta área.

El elemento recortado puede ser cualquier elemento contenedor o imagen.

/* SVG中的clipPath的使用 */ 
.element { 
    clip-path: url(#svgClipPathID); 
} 
/* 使用CSS中的基本图形函数 */ 
.element { 
    clip-path: polygon(...); 
}
/* 或者其他的图形函数 */ 

La forma básica clip-pathde uso para ver el frente de la caja.

Aquí hay un ejemplo para ilustrar el uso de SVG.

<svg height="0" width="0">
    <defs>
        <clipPath id="svgTextPath">
            <text x="0" y="300" textLength="600px" lengthAdjust="spacing" font-family="Vollkorn" font-size="100px" font-weight="700" font-style="italic">
                White Mouse
            </text>
        </clipPath>
    </defs>
</svg>

.txtBox_content{
    clip-path: url(#svgTextPath);
}

3. Aplicación de forma: forma exterior

shape-outside utiliza valores de forma para definir el área flotante de los elementos flotantes . Esta área flotante determina la forma del contenido (elemento flotante) en la línea. Esto hará que el contenido en línea se ajuste a la forma en lugar de rodear un rectángulo.

No se pueden utilizar elementos no flotantes.

Valores posibles:

/* 关键字值 */
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);

/* 全局值 */
shape-outside: initial;
shape-outside: inherit;
shape-outside: unset;

Dos, aplicación clásica 1: círculo de texto envolvente

A veces, es necesario que el texto se ajuste a las imágenes.

Esta es una técnica de composición tipográfica gráfica común. La flotación se usa comúnmente en CSS para lograr este efecto.

<div class="box">
    <div class="img">
        <img src="images/4.jpg" width="300" height="300" alt="">
    </div>
    <div class="txt">
        <p>
            小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。
        </p>
        <p>
            “小说”出自《庄子·外物》。
        </p>
        <p>
            人物、情节、环境是小说的三要素。情节一般包括开端、发展、....
        </p>
        <p>
            “小说”一词最早出现于《庄子·外物》：「饰小说以干县令，其于大达亦远矣。」....
        </p>
    </div>
    <div class="clears"></div>
</div>

*{
    margin: 0; padding: 0;
}

.clears{
    clear: both; height: 0;  overflow: hidden;  line-height: 0; font-size: 0;
}
.box{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    background: #f2f2f2;
}
.img{
    width: 300px;
    height: 300px;
    overflow: hidden;
}
.txt{
    font-size: 16px;
    line-height: 2;
}

Deje que la parte de la imagen flote para lograr el ajuste del texto.  

.img{
    float: left;
    margin:30px;
}

Pero si convierte la parte de la imagen en un círculo, el texto todavía rodea el "rectángulo".

.img{
    float: left;
    margin:30px;
    border-radius: 100%;
}

Para lograr un ajuste "circular" , debe utilizar la nueva propiedad shape-outside de CSS3 , que especifica la forma del ajuste del texto.

.img{
    float: left;
    margin:30px;
    border-radius: 100%;
    shape-outside:circle();  /* 圆形环绕 */
}

3. Aplicación clásica 2: Surround en cualquier forma

De la misma manera, podemos crear efectos de ajuste de texto de cualquier forma.

<div class="txtBox">
    <div class="img">
        <img src="images/fashion.jpg" alt="">
    </div>
    <div class="txt">
        <p>
            耀眼的金属光泽，独具匠心的外观设计，令宝诗龙的每一处都散发着不拘一格的时尚气息。
        </p>
        <p>
            个性十足的林彦俊也对宝诗龙的饰品青眼有加，在七夕时分亲自演绎了宝诗龙的不凡魅力。

        </p>
        <p>
            毫无疑问的，当它的光芒闪耀于脖颈和指间，你便是人群中当仁不让的视觉焦点。
        </p>
        <p>浪漫而性感 Giambattista Valli让繁花盛开</p>
        <p>简单优雅 Stella McCartney打造都市独立女性</p>
        <p>2019秋冬巴黎周回顾 潮流Key Word尽在我手</p>
        <p>都市摩登女郎style LV用各种元素混搭</p>
        <p>那些老佛爷给我们做的包包你有几个？</p>
        <p>浪漫而性感 Giambattista Valli让繁花盛开</p>
        <p>简单优雅 Stella McCartney打造都市独立女性</p>
        <p>2019秋冬巴黎周回顾 潮流Key Word尽在我手</p>
        <p>都市摩登女郎style LV用各种元素混搭</p>
        <p>那些老佛爷给我们做的包包你有几个？</p>
    </div>
   <div class="clears"></div>
</div>

*{
    margin: 0; padding: 0;
}

.clears{
    clear: both; height: 0;  overflow: hidden;  line-height: 0; font-size: 0;
}

.txtBox{
    margin-top: 50px;
}


.txtBox{
    width: 1000px;
    height: 687px;
    background: #bda895;
    margin-right: auto;
    margin-left: auto;
}
.img{
    float: left;
    shape-outside: polygon(0 0,368px 0, 425px 226px, 463px 227px ,475px 355px,
    558px  503px ,391px  596px,  440px 687px, 0  687px);
}
.txt{
    color: #fff;
    font-size: 20px;
    line-height: 2;
    padding-top: 30px;
    padding-right: 30px;
}

Las coordenadas de la forma se pueden buscar en secuencia utilizando herramientas como PS y líneas de referencia.

Cuarto, compatibilidad

La compatibilidad de los estilos relacionados con la forma es bastante buena, excepto para IE. A nadie le importa IE ahora.