Fondos y bordes CSS
El módulo Fondos y bordes CSS proporciona propiedades para agregar bordes, esquinas redondeadas y sombras de caja a los elementos.
Puede agregar diferentes tipos de estilos de borde, incluidos bordes hechos de imágenes de cualquier tipo de imagen, desde imágenes rasterizadas hasta degradados CSS. Los bordes pueden ser cuadrados o redondeados, y se puede establecer un radio diferente para cada esquina. Los elementos se pueden redondear tengan o no un borde visible.
Las sombras de caja incluyen sombras internas y externas, sombras únicas o múltiples, y sólidas o que se desvanecen a transparentes. Una sombra de caja exterior proyecta una sombra como si el cuadro de borde del elemento fuera opaco. Una sombra de caja interna proyecta una sombra como si todo lo que está fuera del borde del relleno fuera opaco. La sombra puede ser sólida o incluir una distancia extendida con el color de la sombra en transición a transparente.
Las propiedades de este módulo también te permiten definir si las celdas dentro de un <table>
deben tener bordes compartidos o separados.
Fondos, bordes y sombras de caja en acción
Esta muestra de bordes, fondos y sombras de caja consta de imágenes de fondo centradas hechas de degradados lineales y radiales. Una serie de sombras de caja hacen que el borde parezca "saltar". El elemento de la izquierda tiene un conjunto de imágenes de borde. El elemento de la derecha tiene un borde punteado redondeado.
Las imágenes de fondo se definen con background-image
. Las imágenes están centradas con background-position
. Se utilizan diferentes valores de la propiedad background-clip
para las múltiples imágenes de fondo para hacer que las imágenes de fondo permanezcan dentro de la caja de contenido. El color de fondo se recorta en el cuadro de relleno evitando que el fondo aparezca a través de las secciones transparentes para border-image
y dotted
border
. Las esquinas redondeadas en el elemento de la derecha se crean usando la propiedad border-radius
. Se utiliza una única declaración box-shadow
para establecer todas las sombras, tanto de entrada como de salida.
Para ver el código de este ejemplo, vea la fuente en GitHub.
Referencia
Propiedades
background-attachment
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
-
background
abreviatura -
background-position-x
Experimental -
background-position-y
Experimental -
background-position-inline
Experimental -
background-position-block
Experimental border-bottom-color
border-bottom-style
border-bottom-width
-
border-bottom
abreviatura border-left-color
border-left-style
border-left-width
-
border-left
abreviatura border-right-color
border-right-style
border-right-width
-
border-right
abreviatura border-top-color
border-top-style
border-top-width
-
border-top
abreviatura -
border-color
abreviatura -
border-style
abreviatura -
border-width
abreviatura -
border
abreviatura border-collapse
border-bottom-left-radius
border-bottom-right-radius
border-top-left-radius
border-top-right-radius
-
border-radius
abreviatura border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
-
border-image
abreviatura box-shadow
Tipos de datos
- Tipo enumerado
line-type
Guías
- Aprende CSS: fondo y bordes
-
Explica cómo implementar imágenes decorativas utilizando imágenes de fondo con CSS.
- Usando múltiples fondos
-
Explica cómo configurar uno o más fondos en un elemento.
- Cambiar el tamaño de las imágenes de fondo
-
Describe cómo cambiar el tamaño y el comportamiento de repetición de las imágenes de fondo.
- Aprende CSS: el modelo de caja
-
Explica cómo los bordes, junto con otras propiedades del modelo de caja, afectan el modelo de caja CSS.
- Usando gradientes de CSS
-
Explica cómo crear imágenes de fondo degradadas con CSS.
Conceptos relacionados
-
Propiedad
border-block-end-color
-
Propiedad
border-block-start-color
-
Propiedad
border-inline-end-color
-
Propiedad
border-inline-start-color
-
Propiedad
border-block-end-style
-
Propiedad
border-block-start-style
-
Propiedad
border-inline-end-style
-
Propiedad
border-inline-start-style
-
Propiedad
border-block-end-width
-
Propiedad
border-block-start-width
-
Propiedad
border-inline-end-width
-
Propiedad
border-inline-start-width
-
Propiedad
border-start-start-radius
-
Propiedad
border-start-end-radius
-
Propiedad
border-end-start-radius
-
Propiedad
border-end-end-radius
-
Propiedad
box-sizing
-
Propiedad
box-decoration-break
-
Propiedad
text-shadow
-
Función CSS
url()
-
Tipo de dato
<color>
-
Tipo de dato
<image>
-
Tipo de dato
<position>
-
Palabra clave
currentcolor
Especificaciones
Specification |
---|
CSS Backgrounds and Borders Module Level 3 |
Véase también
- Herramientas interactivas que le permiten crear visualmente imágenes de bordes, esquinas redondeadas y sombras de caja:
- Aplicando color a elementos HTML usando CSS, incluso para bordes.
- La función de filtro
drop-shadow()
que aplica un efecto de sombra a la imagen de entrada. La función es utilizada por las propiedadesfilter
ybackdrop-filter
.