La propiedad de forma exterior se utiliza para definir la forma que puede envolver el contenido en línea adyacente. Se puede usar para definir formas complejas, incluidas imágenes que se pueden usar para envolver texto en lugar de cuadros simples.
Sintaxis:
shape-outside: <basic-shape> | <shape-box> | <image> | none | initial | inherit
Valores de propiedad:
- basic-shape: Se utiliza para definir la forma que se debe utilizar para calcular el área de flotación. La forma se puede crear utilizando una de las funciones admitidas:
- circle(): Se utiliza para hacer formas circulares.
- ellipse(): Se utiliza para hacer formas elípticas.
- recuadro(): Se utiliza para hacer formas rectangulares.
- polígono(): Se utiliza para hacer formas que tienen más de 3 vértices.
- path(): se utiliza para crear formas que tienen líneas, arcos o curvas.
Ejemplo 1: Este ejemplo implementa la función circle().<!DOCTYPE html><html><head><title>CSS | shape-outside</title><style>.outline {shape-outside: circle(25%);width: 100px;height: 200px;float: left;}</style></head><body><h1style="color: green">GeeksforGeeks</h1><b>CSS | shape-outside</b><p>shape-outside: circle(25%)</p><divclass="outline"></div><divclass="container">GeeksforGeeks is a computer scienceportal with a huge variety of wellwritten and explained computer scienceand programming articles, quizzes andinterview questions. The portal alsohas dedicated GATE preparation andcompetitive programming sections.<br><br>GeeksforGeeks is a computer scienceportal with a huge variety of wellwritten and explained computer scienceand programming articles, quizzes andinterview questions. The portal alsohas dedicated GATE preparation andcompetitive programming sections.</div></body></html>Producción:
Ejemplo 2: Este ejemplo implementa la función inset().
<!DOCTYPE html><html><head><title>CSS | shape-outside</title><style>.outline {shape-outside: inset(50px 50px);width: 150px;height: 150px;float: left;}</style></head><body><h1style="color: green">GeeksforGeeks</h1><b>CSS | shape-outside</b><p>shape-outside: inset(50px 50px)</p><divclass="outline"></div><divclass="container">GeeksforGeeks is a computer scienceportal with a huge variety of wellwritten and explained computer scienceand programming articles, quizzes andinterview questions. The portal alsohas dedicated GATE preparation andcompetitive programming sections.<br><br>GeeksforGeeks is a computer scienceportal with a huge variety of wellwritten and explained computer scienceand programming articles, quizzes andinterview questions. The portal alsohas dedicated GATE preparation andcompetitive programming sections.</div></body></html>Producción:
- shape-outside: se utiliza para definir cuál de los modelos de caja se utiliza para posicionar dentro de la forma. Estos valores se utilizan después de definir el valor de la forma. Hay 4 valores que se pueden utilizar:
- margin-box: se utiliza para definir la forma que está encerrada por el borde del margen exterior. Los radios de las esquinas se determinan en función de los valores del radio del borde y del margen. Este es el valor predeterminado que se usaría.
- border-box: se utiliza para definir la forma que está encerrada por el borde del margen exterior. Se siguen las reglas predeterminadas de modelado del radio del borde.
- padding-box: se utiliza para definir la forma que está encerrada por el borde de relleno exterior. Se siguen las reglas predeterminadas de modelado del radio del borde.
- cuadro de contenido: se utiliza para definir la forma que está encerrada por el borde exterior del contenido.
- imagen: se utiliza para especificar la imagen de la que se extraería el valor alfa para calcular el área flotante. La función url() se puede utilizar para definir la imagen. También se puede usar un degradado en lugar de la imagen.
Ejemplo:
<!DOCTYPE html><html><head><title>CSS | shape-outside</title><style>.outline {shape-outside: url();background: url() no-repeat;width: 150px;height: 150px;float: left;}</style></head><body><h1style="color: green">GeeksforGeeks</h1><b>CSS | shape-outside</b><p>shape-outside: url()</p><divclass="outline"></div><divclass="container">GeeksforGeeks is a computer scienceportal with a huge variety of wellwritten and explained computer scienceand programming articles, quizzes andinterview questions. The portal alsohas dedicated GATE preparation andcompetitive programming sections.<br><br>GeeksforGeeks is a computer scienceportal with a huge variety of wellwritten and explained computer scienceand programming articles, quizzes andinterview questions. The portal alsohas dedicated GATE preparation andcompetitive programming sections.</div></body></html>Producción:
- ninguno: se utiliza para configurar la propiedad para que no tenga área flotante. El contenido en línea se envuelve alrededor del cuadro de margen de forma predeterminada.
- initial: Se utiliza para establecer la propiedad en su valor predeterminado.
- heredar: se utiliza para establecer la propiedad para heredar de su padre.
Navegadores compatibles: los navegadores compatibles con la propiedad de forma exterior se enumeran a continuación:
- cromo 37
- Firefox 62
- Safari 10.1
- Ópera 24
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA