Práctica 7

Border-radius es la propiedad que define el radio de las cuatro esquinas.

Este blockquote tiene un border-radius de 10 px

Esta propiedad nos permite definir el radio de la esquina superior derecha.

Este blockquote tiene un border-top-right-radius de 10 px

Propiedad que nos permite definir el radio del borde de la esquina inferior derecha.

Este blockquote tiene un border-bottom-right-radius de 10 px

En este caso pasamos al lado de la derecha definiendo con border-bottom-left-radius el radio del borde inferior de la esquina derecha.

Este blockquote tiene un border-bottom-left-radius de 10 px

Esta propiedad nos permite definir el radio del borde superior de la esquina derecha.

Este blockquote tiene un border-top-left-radius de 10 px

La propiedad border-Shadow es la propiedad css que nos permite describir uo o m´á efectos de sombras.Border-shadow nos permite implementar una sombra difuminada de casi cualquier elemento.
Sintaxis:

 "box-shadow:  none | [inset? && [ offset-x offset-y blur-radius:? spread-radius:? color:? ] ];"

La propiedad border-image permite utilizar una imagen como borde.

Ejemplo: border-image-source: url(imagen) arriba derecha abajo izquierda stretch stretch;

En imagen especificamos la ruta donde se encuentra la imagen que vayamos a utilizar como borde. Después indicamos el tamaño que vamos a utilizar para cada esquina de la imagen. Para ello seguiremos el orden de las agujas del reloj, comenzando por arriba, derecha, abajo e izquierda. Se puedn expresar en porcentajes o con píxeles exactos. La última parte (stretch), determina cómo se van a escalar y cortar los bordes de los lados y superior e inferior de nuestro elemento. Hay tres posibles valores:

• stretch (estirar): la imagen se estira o encoge para ocupar todo el espacio necesario
• repeat (repetir): la imagen se repite para ocupar todo el espacio necesario
• round (redondear): es una variación de la opción 'repeat', la cual distribuye las partes de tal manera que los extremos se conecten bien.

Si especificamos sólo un valor es como poner dos veces el mismo, por ejemplo, sólo una vez stretch, será stretch tanto para los lados superior e inferior como para izquierda y derecha. El valor por defecto es "stretch".

article #border-image-source {
    border: 1em;
    border-image: url("border.png") 27 round stretch;
}
                      

En el caso anterior tenemos dos valores 'round' para arriba y abajo y 'stretch' para los lados izquierdo y derecho.

border-image-slice permite utilizar una imagen como borde especificando qué cantidad de imagen queremos para cada borde. Para este ejemplo utilizaremos esta imagen:

En el siguiente ejemplo vemos como hemos utilizado la imagen anterior como borde, los valores numéricos indican a qué distancia de los bordes se recorta la imagen:

article #border-image-slice {
  border: 1em;
  border-image: url("pastilla_png");
  border-image-slice: 15 35 10 35;
}

Si sólo se escribe un valor, este se aplica a los cuatro lados.

Si se escriben dos valores, el primero se aplica arriba y abajo y el segundo a derecha e izquierda.

Si se escriben tres valores, el primero se aplica arriba, el segundo a derecha e izquierda y el tercero abajo.

Si se escriben cuatro valores, el primero se aplica arriba, el segundo a la derecha, el tercero abajo y el cuarto a la izquierda.

Utilizando además el valor "fill" conseguiremos el relleno para la imagen como vemos en el ejemplo siguiente:

article #border-image-slice {
  border: 1em;
  border-image: url("pastilla.png");
  border-image-slice: 27 fill;
}

La propiedad border-image-width permite definir el tamaño del espacio ocupado por la imagen de borde.

Con dos valores la propiedad asignará el primer valor para la parte superior e inferior y el segundo valor para la parte derecha e izquierda.

article #border-image-width {
  border: 1em;
  border-image: url("pastilla.png");
  border-image-slice: 27;
  border-image-width: 20px 40px;
}

Si sólo se escribe un valor, este se aplica a los cuatro lados.

Si se escriben dos valores, el primero se aplica arriba y abajo y el segundo a derecha e izquierda.

Si se escriben tres valores, el primero se aplica arriba, el segundo a derecha e izquierda y el tercero abajo.

Si se escriben cuatro valores, el primero se aplica arriba, el segundo a la derecha, el tercero abajo y el cuarto a la izquierda.

Con border-image-outset podemos extender la imagen de borde más allá del elemento, por ejemplo, podemos definir que se amplíe más de arriba que de abajo o más de derecha que de izquierda o más de arriba y abajo que de izquierda y derecha, todas las combinaciones son posibles.

En este ejemplo ampliaremos los bordes tanto por la izquierda como por la derecha con el mismo valor, hasta que se salga del elemento que los contiene. El primer valor será para la parte superior e inferior y el segundo valor para los laterales.

article #border-image-outset {
  border: 1em;
  border-image: url("pastilla.png");
  border-image-slice: 27;
  border-image-outset: 0px 20px;
}

Si sólo se escribe un valor, este se aplica a los cuatro lados.

Si se escriben dos valores, el primero se aplica arriba y abajo y el segundo a derecha e izquierda.

Si se escriben tres valores, el primero se aplica arriba, el segundo a derecha e izquierda y el tercero abajo.

Si se escriben cuatro valores, el primero se aplica arriba, el segundo a la derecha, el tercero abajo y el cuarto a la izquierda.

La propiedad border-image-repeat permite aplicar distintos efectos dependiendo de lo que queramos conseguir. Los valores que podemos definir son los siguientes:

• Stretch: la imagen se estira o encoge para ocupar todo el espacio necesario.
• Repeat: la imagen se repite para ocupar todo el espacio necesario.
• Round: la imagen se repite el máximo número entero de veces posible y se estira o encoge para ocupar todo el espacio necesario.
• Space: la imagen se repite el máximo número entero de veces posible y el espacio sobrante se distribuye entre las imágenes (las imágenes no se estiran o encogen).

La imagen que utilizaremos como ejemplo será la siguiente:

Ejemplo con Stretch:

article #border-image-repeat-stretch {
  border: 1em;
  border-image: url("hormigas.png");
  border-image-slice: 70;
  border-image-repeat: stretch;
}

Ejemplo con Repeat:

article #border-image-repeat-repeat {
  border: 3em;
  border-image: url("hormigas.png");
  border-image-slice: 70;
  border-image-repeat: repeat;
}

Ejemplo con Round:

article #border-image-repeat-round {
  border: 3em;
  border-image: url("hormigas.png");
  border-image-slice: 70;
  border-image-repeat: round;
}

Ejemplo con Space:

article #border-image-repeat-space {
  border: 3em;
  border-image: url("hormigas.png");
  border-image-slice: 70;
  border-image-repeat: space;
}

Cuando hay que romper una caja debido a que en la vista impresa se pasa de página o por ejemplo para los elementos de línea cuando saltan a otra línea, podemos hacer que la decoración de la caja se rompa o se genere otra vez la decoración en la siguiente porción.

Tenemos dos valores posibles:

• Slice: Todas las cajas son tratadas como una entidad unica con loque el fondo se prolonga de una a otras.
• Clone: Cada caja es tratada como una caja independiente.

En los siguientes ejemplos tenemos un párrafo con un texto que supera el tamaño de la caja que lo contiene, produciendo un corte o rotura en las decoraciones de bordes, sombras, etc:

En el primer caso utilizaremos el valor slice.

article #box-decoration-break-slice {
	line-height: 2em;
	border: solid blue 1px;
	border-radius: 0.5em;
	box-shadow: 0.15em 0.15em 0.1em 0.1em rgba(0,0,0,0.4);
	box-decoration-break: slice;
}
					

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.

En el segundo caso utilizaremos el valor clone:

article #box-decoration-break-slice {
	line-height: 2em;
	border: solid blue 1px;
	border-radius: 0.5em;
	box-shadow: 0.15em 0.15em 0.1em 0.1em rgba(0,0,0,0.4);
	box-decoration-break: clone;
}
					

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.