Valores CSS del borde. La propiedad del radio de borde. Redondear las esquinas del borde. Límites para partidos individuales

La propiedad de borde CSS se utiliza para crear el borde de un objeto, es decir, el grosor del borde, su color y estilo. Esta propiedad se usa ampliamente en HTML. Puede crear varios efectos para percibir mejor el contenido de la página. Por ejemplo, diseñar una barra lateral, un encabezado de sitio web, un menú, etc.

1. Sintaxis del borde CSS

borde : ancho de borde estilo de borde color de borde | heredar;

• ancho de borde - espesor del borde. Puede configurarlo en píxeles (px) o utilizar los valores estándar fino, medio, grueso (solo difieren en el ancho en píxeles)
• estilo de borde: estilo del borde mostrado. Puede tomar los siguientes valores
  • ninguno u oculto: cancela el borde
  • punteado - marco punteado
  • discontinuo - marco hecho de guiones
  • sólido - línea simple (más utilizada)
  • doble - doble marco
  • ranura - borde 3D ranurado
  • cresta, inserción, inicio: varios efectos de marco 3D
  • heredar: se aplica el valor del elemento padre
• color del borde - color del borde. Se puede especificar usando un nombre de color específico o en formato RGB (ver nombres de colores html para el sitio)

Nota

Los valores de la propiedad de borde CSS se pueden establecer en cualquier orden. La secuencia más utilizada es “color de estilo de espesor”.

2. Ejemplos con diferentes bordes CSS

2.1. Ejemplo. Diferentes estilos de diseño de bordes estilo de borde

border-style: dashed

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

border-style: dotted

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

2.2. Пример. Изменения цвета рамки при наведении курсора мыши

Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).

При наведении курсора мыши на блок цвет рамки изменится

Вот как это выглядит на странице:

2.3. Пример. Как сделать прозрачную рамку border

Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P) , где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)

Вот как это выглядит на странице:

3. Толщина границы: свойство border-width

Задает толщину линии. Ранее мы задавали ее в едином описании border.

Синтаксис CSS border-width

border-width : thin | medium | thick | значение ;

• thin - тонкая толщина линии
• medium - средняя толщина линии
• thick - толстая толщина линии

Ниже приведены несколько примеров. Самым необычным будет - это разная толщина границы у каждой стороны.

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

Вот как это выглядит на странице:

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

4. Как сделать рамку border только с одного края (границы)

У свойства CSS border есть производные свойства для задания односторонних границ у элемента:

• border-top - для задания рамки сверху (верхняя граница)
• border-bottom - для задания рамки снизу (нижняя граница)
• border-right - для задания рамки справа (правая граница)
• border-left - для задания рамки слева (левая граница)

Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.

Также есть свойства

• border-top-color - задание цвета верхний границы
• border-top-style - задание стиля верхней границы
• border-top-width - задание толщины верхней границы
• и т.д. для каждого направления

На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми

/* Описание двух одинаковых стилей: */

4.1. Пример. Красивая рамка для выделения цитат

Пример рамки для цитаты

Вот как это выглядит на странице:

Пример рамки для цитаты

Примечание
Можно задать отдельную границу для каждой из сторон.

5. Как сделать несколько границ border у элемента html

Иногда требуется сделать несколько границ. Приведем пример

5.1. Первый вариант с несколькими границами

Вот как это выглядит на странице:

Есть второй способ через наложение теней.

5.2. Наложение теней для создания нескольких границ

Вот как это выглядит на странице:

6. Скругление углов у границ (border-radius)

Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например

7. Вдавленная линия CSS

Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту.

---

Вот как это выглядит на странице:

Для обращения к border из JavaScript нужно писать следующую конструкцию:

document.getElementById("elementID").style.border ="VALUE "

Для управления границей элемента применяется универсальное свойство border . Это свойство позволяет установить в одном объявлении толщину, стиль и цвет границы элемента.

Эти три свойства (толщину, стиль и цвет границы) можно установить в одном объявлении. Вот пример:

Puede especificar un estilo de borde solo en un lado de un elemento. Para hacer esto, use las propiedades border-top (borde superior), border-right (borde derecho), border-bottom (borde inferior), border-left (borde izquierdo).

En este ejemplo, cada lado del bloque tiene un grosor, estilo y color de borde diferente.

Piensa en cómo podrías crear una forma como esta usando CSS:

Los valores de los bordes (grosor, estilo y color) se pueden configurar por separado mediante propiedades especiales.

• estilo de borde - estilo de borde.
• ancho de borde - ancho del borde.
• color del borde - color del borde.

Consideremos cada uno de los valores por separado.

propiedad estilo frontera Estilo de borde.

La propiedad border-style establece el estilo del borde. En CSS, a diferencia de HTML, el borde de un elemento no solo puede ser sólido. Se aceptan los siguientes valores para el estilo de borde:

1. ninguno: sin borde (predeterminado).
2. sólido - borde sólido.
3. doble - doble borde.
4. discontinuo - borde punteado.
5. punteado: un borde formado por una serie de puntos.
6. cresta - borde de "cresta".
7. ranura - borde "ranura".
8. recuadro: borde deprimido.
9. principio - borde extruido.

Ejemplos de cómo se ven.

sin fronteras (ninguna)

borde sólido

doble borde

borde de una serie de puntos (punteado)

borde discontinuo

borde de ranura

borde de cresta

borde sangrado (recuadro)

borde extruido (inicio)

Por cierto, si configura el color del borde en negro para el marco de la cumbrera, obtendrá este resultado.

Un bloque div con borde negro y estilo de cresta.

El marco parece sólido, pero eso se debe a que el estilo de cresta se crea agregando un efecto de sombra negra, y el efecto negro no es visible en un marco negro.

Usando la propiedad de estilo de borde, el estilo del borde se puede establecer no solo para todos los lados del bloque. Es posible establecer varios valores para una propiedad de estilo de borde, según la cantidad de valores, el estilo de borde se asignará a una cantidad diferente de lados del bloque. Puede establecer uno, dos, tres o cuatro valores. Veamos ejemplos para cada caso.

Un valor (sólido): el estilo del borde se establece para todos los lados del bloque.

Dos valores (doble sólido): el primer valor establece el estilo para los lados superior e inferior, el segundo para el lateral.

Tres valores (sólido con doble punto): el primer valor para el lado superior, el segundo para los lados y el tercero para la parte inferior.

Cuatro valores (sólido, doble punto y rayado): cada valor para un lado en el sentido de las agujas del reloj comenzando desde arriba.

La propiedad del ancho del borde. Grosor del borde.

Para establecer el ancho del borde de un elemento, use la propiedad border-width. El grosor del borde se puede especificar en cualquier unidad de medida absoluta, por ejemplo en píxeles.

Al igual que la propiedad de estilo de borde, la propiedad también se puede establecer entre uno y cuatro valores. Veamos ejemplos para cada caso.

Código de ejemplo:

También hay valores de palabras clave para la propiedad de ancho de borde. Hay tres en total:

• delgado - borde delgado;
• medio - espesor medio;
• grueso - borde grueso;

Grosor del borde: fino.

Grosor del borde: medio.

Grosor del borde: grueso.

La propiedad de color del borde. Color del borde.

Para controlar el color del borde, utilice la herramienta de color del borde. Los colores de esta propiedad se pueden configurar utilizando cualquier método descrito en el artículo "Colores en CSS", a saber:

• Notación hexadecimal (#ff00aa) del color.
• El formato RGB es rgb(255,12,110). Formato RGBA para CSS3.
• Formatos HSL y HSLA para CSS3.
• Nombre del color, por ejemplo negro. Para obtener una lista completa de nombres de colores, consulte la tabla de nombres de colores CSS.

La propiedad border-color también puede tener de uno a cuatro valores y los trata de manera similar a las propiedades anteriores.

Un valor (rojo).

Dos valores (rojo negro).

Tres valores (rojo negro amarillo).

Cuatro valores (rojo negro amarillo azul).

Ahora volvamos al problema planteado anteriormente y dibujemos una figura:

Aquí está el código que dibuja dicha figura, solo que de mayor tamaño:

Establecer valores para los lados por separado

Se mencionó anteriormente que puede especificar valores de propiedad de borde solo para un lado de un bloque. Existen propiedades para estos fines:

• borde superior
• border-right (borde derecho)
• borde inferior
• border-left (borde izquierdo)

Permítanme recordarles que para todas las propiedades se especifican tres valores (espesor, estilo y color) en cualquier orden. Pero existen propiedades que le permiten establecer el grosor, el color y el estilo de cada lado por separado. La escritura de estas propiedades se deriva de lo anterior.

Opciones de borde superior (borde superior).

• border-top-color: establece el color del borde superior del elemento.
• border-top-width: establece el grosor del borde superior del elemento.
• border-top-style: establece el estilo del borde superior del elemento.

Opciones de borde derecho (borde-derecho).

• border-right-color: establece el color del borde derecho del elemento.
• border-right-width: establece el grosor del borde derecho del elemento.
• border-right-style: establece el estilo del borde derecho del elemento.

Opciones de borde inferior (borde inferior).

• border-bottom-color: establece el color del borde inferior del elemento.
• border-bottom-width: establece el grosor del borde inferior del elemento.
• border-bottom-style: establece el estilo del borde inferior del elemento.

Opciones de borde izquierdo (borde-izquierda).

• border-left-color: establece el color del borde izquierdo del elemento.
• border-left-width: establece el grosor del borde izquierdo del elemento.
• border-left-style: establece el estilo del borde izquierdo del elemento.

Un ejemplo de uso de estas propiedades:

La propiedad del radio de borde. Redondear las esquinas del borde.

La propiedad border-radius está destinada a redondear las esquinas de los bordes de un elemento. Esta propiedad se introdujo en CSS3 y funciona correctamente en todos los navegadores modernos excepto Internet Explorer 8 (y versiones anteriores).

Los valores pueden ser cualquier número utilizado en CSS.

Propiedad de radio de borde: 15 px.

Si no se especifica el marco del bloque, el empalme se produce con el fondo. A continuación se muestra un ejemplo de un bloque redondeado sin borde, pero con un color de fondo:

Propiedad de radio de borde: 15 px.

Existen propiedades para redondear cada esquina individual de un elemento. Este ejemplo los usa todos:

Radio del borde superior izquierdo: 15 px; borde-arriba-derecha-radio: 0; borde-inferior-derecho-radio: 15px; borde-inferior-izquierdo-radio: 0;

Propiedad de radio de borde: 15 px.

Aunque este código se puede escribir en una sola declaración: border-radius : 15px 0 15px 0 . El hecho es que la propiedad border-radius se puede establecer entre uno y cuatro valores. La siguiente tabla describe las reglas que rigen dichos anuncios.

Habiendo estudiado cuidadosamente esta tabla, puede comprender que la entrada más corta para el estilo deseado será así: border-radius : 15px 0 . Sólo hay dos significados.

un poco de practica

Dibujando un limón usando CSS.

Aquí está el código para dicho bloque:

Margen: 0 automático; /* Centrar el bloque */ width: 200px; altura: 200 píxeles; fondo: #F5F240; borde: 1px sólido #F0D900; radio del borde: 10px 150px 30px 150px;

Ya hemos dibujado la figura:

Ahora dejemos un triángulo de él:

El código del triángulo es:

Margen: 0 automático; /* Centrar el bloque */ padding: 0px; ancho: 0px; altura: 0; borde: 30px blanco sólido; color del borde inferior: rojo;

Unas cuantas lecciones antes, vimos una representación esquemática de un bloque de página web y también hablamos brevemente sobre la propiedad CSS border, que se puede usar para establecer bordes para un elemento. Esta vez veremos esta propiedad con más detalle usando ejemplos.

El borde se encuentra entre el margen y el relleno. Esto significa que el margen es detrás borde. El borde se puede colocar en los cuatro lados (como si encerrara el bloque en un marco), o en uno, dos o tres lados. CSS te permite controlar el grosor, el color y el estilo de los bordes. Estudiemos esto con más detalle.

Ancho de borde: ancho de borde

La propiedad border-width establece el ancho del borde. Muy a menudo, este tamaño se indica en píxeles. Puede establecer anchos iguales o diferentes para los cuatro bordes, por ejemplo:

/* los 4 bordes tienen 2px de ancho: */ border-width: 2px; /* los bordes superior e inferior tienen 2px de ancho, el izquierdo y el derecho tienen 4px: */ border-width: 2px 4px; /* borde superior - 2px, izquierdo y derecho - 6px, inferior - 3px: */ ancho de borde: 2px 6px 3px; /* borde superior - 2px, derecho - 3px, inferior - 4px, izquierdo - 5px: */ ancho de borde: 2px 3px 4px 5px;

Además, existen palabras clave para indicar el ancho del borde:

• delgado: borde de 2 píxeles de ancho;
• medio - borde de 4px de ancho;
• grueso: borde de 6 píxeles de ancho.

Color del borde: color del borde

La propiedad border-color especifica el color de los bordes. Los colores se pueden especificar en cualquier formato CSS: palabras clave, hexadecimal o RGB, lo que le resulte más conveniente. Por analogía con la propiedad anterior, puede establecer un color para todos los bordes o seleccionar colores diferentes para cada borde.

Color del borde: #FFFF00;

También puedes establecer un color transparente escribiendo:

Color del borde: transparente;

Estilo de borde: estilo de borde

Gracias a la propiedad de estilo de borde, puede convertir un borde normal en uno de puntos, uno doble o uno sólido; hay muchos significados diferentes. Para hacer esto, use las siguientes palabras clave:

• sólido - borde sólido;
• punteado - borde de puntos;
• discontinuo - borde punteado;
• doble - doble borde;
• ranura - límite de muesca volumétrica;
• cresta: un borde voluminoso con un borde grueso (esencialmente una inversión del estilo anterior);
• inicio - borde extruido;
• recuadro: un borde sangrado (esencialmente una inversión del estilo anterior).

Al igual que con las propiedades de ancho de borde y color de borde, cada borde de bloque puede tener un estilo diferente; por ejemplo, puede hacer que los bordes superior e inferior sean discontinuos, y que los bordes derecho e izquierdo se dupliquen. Aquí todo depende sólo de la imaginación.

Estilo de borde: doble punto;

Nota: La apariencia de los bordes puede variar ligeramente en diferentes navegadores.

Borde de propiedad CSS común: 3 en 1

Para aplicar estilo a un borde, no es necesario utilizar las tres propiedades anteriores a la vez. Basta con conocer la propiedad universal CSS del borde, con la que escribirá un estilo mucho más rápido y ahorrará espacio. Para hacer esto, escriba los valores de las tres propiedades en orden aleatorio:

Borde: 2px punteado #FF0000;

Límites para partidos individuales

Usando las propiedades de borde adicionales en CSS, puede diseñar cada borde de bloque individualmente. Las siguientes propiedades le ayudarán con esto:

• border-top: estilo para el borde superior;
• border-right - para el borde derecho;
• border-bottom - para el borde inferior;
• border-left: para el borde izquierdo.

borde superior: 2px sólido #0000FF; borde inferior: 7px doble #000080;

Resultados

Ahora que sabes cómo hacer bordes para bloques, puedes practicar cómo hacerlos. Hay muchas formas de describir de manera sucinta un estilo sin tener demasiadas líneas en un archivo CSS. Aquí juega un papel importante el conocimiento de los principios de las hojas de estilo en cascada. Veamos un ejemplo.

Supongamos que desea crear un borde para un div con tres bordes grises sólidos y un borde inferior verde discontinuo. Puedes escribir este estilo así:

Div (borde derecho: 8px doble #FF0000; borde izquierdo: 8px doble #FF0000; borde inferior: 8px doble #FF0000; borde superior: 4px punteado #FDD201;)

Pero este es un post demasiado largo. Todo esto se puede escribir brevemente:

Div (borde: 8px doble #FF0000; borde superior: 4px punteado #FDD201;)

Como se mencionó anteriormente, aquí aprovecharemos las propiedades en cascada de CSS. Primero escribimos el estilo para los cuatro lados del marco y luego especificamos el estilo por separado para el borde inferior, sobrescribiendo así parcialmente el estilo anterior. Es muy importante seguir esta secuencia de líneas.

Minitarea

Intente crear un borde para el div con dimensiones de 200x200 píxeles. Los estilos para el marco deberían ser así:

• Haz que los bordes superior e inferior sean sólidos sólido, dales el mismo color de elección y un ancho de 5 píxeles.
• Haz el borde izquierdo discontinuo, 3 píxeles de ancho, elige un color diferente al anterior.
• Haz doble el borde derecho doble, 7 píxeles de ancho, color diferente a los dos anteriores.

Al final, tu trabajo debería verse así (excepto por el color, que eliges tú):

Resultado de la tarea (ver en Chrome)

La propiedad de borde genérica le permite establecer simultáneamente el grosor, el estilo y el color del borde alrededor de un elemento. Los valores pueden estar en cualquier orden, separados por un espacio; el propio navegador determinará cuál de ellos corresponde a la propiedad deseada. Para establecer un borde solo en ciertos lados de un elemento, use las propiedades border-top, border-bottom, border-left y border-right.

Breve información

Designaciones

	Descripción	Ejemplo
<тип>	Indica el tipo de valor.	<размер>
A && B	Los valores deben generarse en el orden especificado.	<размер> && <цвет>
Un | B	Indica que es necesario seleccionar solo un valor de los propuestos (A o B).	normales | letras minúsculas
Un || B	Cada valor se puede utilizar de forma independiente o junto con otros en cualquier orden.	ancho || contar
	Valores de los grupos.	[ cultivo || cruz ]
*	Repita cero o más veces.	[,<время>]*
+	Repita una o más veces.	<число>+
?	El tipo, palabra o grupo especificado es opcional.	¿recuadro?
(A,B)	Repita al menos A, pero no más de B veces.	<радиус>{1,4}
#	Repita una o más veces separadas por comas.	<время>#

×

Valores

El valor del ancho del borde determina el grosor del borde. Se proporcionan varios valores de estilo de borde para controlar su apariencia. Sus nombres y el resultado de la acción se presentan en la Fig. 1.

Figura 1. Estilos de marco

border-color establece el color del borde, el valor puede estar en cualquier formato permitido por CSS.

Ejemplo

Este ejemplo agrega un borde doble alrededor del bloque. El resultado se muestra en la figura. 2.

Arroz. 2. Aplicar la propiedad de borde

modelo de objetos

Un objeto.estilo.borde

Nota

El navegador Internet Explorer hasta la versión 6 inclusive muestra puntos y rayas con un grosor de borde de 1 px. Con un grosor de 2px y superior, el valor punteado funciona correctamente. Este error se solucionó en IE7, pero solo para todos los bordes de 1 px. Si uno de los bordes del bloque tiene un grosor de 2px o más, entonces en IE7 el valor punteado se convierte en discontinuo.

El estilo del borde puede variar ligeramente entre navegadores cuando se utilizan valores de ranura, cresta, inserción o inicio.

Especificación

Cada especificación pasa por varias etapas de aprobación.

• Recomendación: la especificación ha sido aprobada por el W3C y se recomienda como estándar.
• Recomendación del candidato ( Posible recomendación) - el grupo responsable del estándar está satisfecho de que cumple con sus objetivos, pero requiere ayuda de la comunidad de desarrollo para implementar el estándar.
• Recomendación propuesta Recomendación sugerida) - en esta etapa el documento se envía al Consejo Asesor del W3C para su aprobación final.
• Borrador de trabajo: una versión más madura de un borrador que ha sido discutido y modificado para revisión de la comunidad.
• Borrador del editor ( Borrador editorial) - una versión borrador del estándar después de que los editores del proyecto realizaron cambios.
• Borrador ( Borrador de especificación) - el primer borrador de la norma.

×

Estoy seguro de que ya estás familiarizado con la propiedad CSS de borde. ¿Aprenderás algo nuevo que no sabías antes sobre el borde CSS? Bueno, no sólo aprenderás, sino que también verás varias cosas nuevas que nunca antes habías conocido.

CSS3 no solo se puede usar para crear esquinas redondeadas, sino que también se puede usar código CSS puro para crear formas complejas. Anteriormente, podías usar imagen de fondo para dar la apariencia de esquinas redondeadas. Gracias a las nuevas técnicas para usar bordes, podemos hacer esto con código CSS puro.

Conceptos básicos del uso del borde CSS

Probablemente ya estés familiarizado con el uso estándar de la propiedad de borde:

Borde: 1px negro sólido;

El código anterior generará un borde de 1 px que será negro. Sencilla y fácilmente. También puedes ampliar un poco la sintaxis:

Ancho del borde: grueso; estilo de borde: sólido; color del borde: negro;

Además, puede utilizar valores específicos para la propiedad de ancho de borde, tres palabras clave: fino, medio y grueso.

Pero utilizar la sintaxis extendida no siempre es práctico. Veamos un ejemplo en el que necesita cambiar el color de un marco de bloque al pasar el mouse. En este caso, utilizar la sintaxis abreviada es mucho más sencillo:

Cuadro (borde: 1px rojo sólido;) .box:hover (borde: 1px verde sólido;)

Una forma más elegante y sencilla de hacerlo es:

Cuadro (borde: 1px rojo sólido;) .box:hover (color del borde: verde;)

Como puedes ver, la técnica avanzada también es útil cuando cambiamos solo algunas propiedades: ancho, estilo, color y otras.

Radio de borde

Borde-radio- Esta es la propiedad "dorada" de CSS3, la primera propiedad, la más común, que se ha vuelto práctica y útil. Excepto IE8 y las versiones siguientes, todos los navegadores muestran esquinas redondeadas al utilizar esto.

Aunque es necesario utilizar prefijos especiales para Webkit y Mozilla para que el estilo sea correcto.

Webkit-border-radio: 10px; -moz-border-radio: 10px; radio del borde: 10px;

Hoy en día, podemos eliminar los prefijos especiales y utilizar la forma estándar de radio de borde.

Otra ventaja es que podemos usar valores especiales para cada lado del bloque:

Radio del borde superior izquierdo: 20 px; borde-arriba-derecha-radio: 0; borde-inferior-derecho-radio: 30px; borde-inferior-izquierdo-radio: 0;

En el código anterior, establecer el radio del borde superior derecho y el radio del borde inferior izquierdo en "nulo" puede lograr algunas formas sorprendentes. Aunque el elemento puede heredar algunas propiedades que será necesario restablecer.

De manera similar al margen y el relleno, podemos comprimir la sintaxis:

/* arriba a la izquierda, arriba a la derecha, abajo a la derecha, abajo a la izquierda */ border-radius: 20px 0 30px 0;

Como ejemplo del uso de la propiedad border-radius, les mostraré un "limón" que los diseñadores suelen utilizar al diseñar sitios web:

Limón (ancho: 200 px; alto: 200 px; fondo: #F5F240; borde: 1 px sólido #F0D900; radio del borde: 10 px 150 px 30 px 150 px;)

Vayamos más allá de lo básico

Para muchos diseñadores, todo el conocimiento en el campo de las propiedades de borde CSS termina aquí. ¡Pero hay otras cosas interesantes que puedes usar para crear cosas increíbles!

Estructuras de borde CSS complejas

Existen muchas técnicas para crear diseños utilizando estructuras de bordes complejas. Por ejemplo, veamos lo siguiente...

Estilo de borde

Siempre utilizamos las propiedades más famosas: sólido, discontinuo y punteado. Pero hay un par de otras propiedades de estilo de borde: ranura y cresta.

Borde: ranura de 20 px #e3e3e3;

O en sintaxis extendida:

Color del borde: #e3e3e3; ancho de borde: 20px; estilo de borde: ranura;

Si bien estas propiedades son útiles, no son la base para crear marcos complejos.

Describir

La técnica más popular para crear un borde doble es utilizar la propiedad de contorno.

Cuadro (borde: 5px sólido #292929; contorno: 5px sólido #e3e3e3;)

Este método funciona muy bien, aunque nos limita a sólo dos fotogramas. A veces es necesario crear un borde degradado que consta de muchas capas... ¿y entonces cómo?

Pseudoelementos

Cuando la técnica del esquema no es suficiente, una solución alternativa es utilizar los pseudoelementos:antes y:después. Con el que puedes agregar marcos adicionales a un elemento:

Cuadro ( ancho: 200px; alto: 200px; fondo: #e3e3e3; posición: relativa; borde: 10px verde sólido; ) /* Crea dos cuadros con el mismo ancho del contenedor */ .box:after, .box:before ( contenido: ""; posición: absoluta; izquierda: 0; .box:after (borde: 5px amarillo sólido;) .box:before (borde: 10px azul sólido)

No parece muy elegante, pero al menos funciona. Es un poco difícil determinar la secuencia de colores dentro de los marcos... pero puedes resolverlo.

Sombra de la caja

Una "manera infantil" interesante de crear un efecto similar es utilizar la propiedad box-shadow de CSS3:

Cuadro (borde: 5px rojo sólido; cuadro-sombra: 0 0 0 5px verde, 0 0 0 10px amarillo, 0 0 0 15px naranja;)

En este caso, fuimos más inteligentes y utilizamos una propiedad box-shadow dedicada. Al cambiar los parámetros de desenfoque x, y a cero, podemos usar diferentes colores para crear múltiples fotogramas.

Pero hay un problema: en los navegadores más antiguos que no comprenden la propiedad box-shadow, solo será visible un marco rojo de 5 píxeles.

"¡Recordar! El diseño del sitio debe verse en todos los navegadores, es decir, igual en todos los navegadores. Incluyendo versiones anteriores."

Cambiando de ángulo

Además del simple valor de radio de borde utilizado, podemos especificar dos valores distintos: separándolos con / especificamos un radio horizontal y vertical.

Por ejemplo:

Radio del borde: 50 px / 100 px; /* radio horizontal, radio vertical */

... esto es equivalente a:

Radio del borde superior izquierdo: 50 px 100 px; borde-arriba-derecha-radio: 50px 100px; borde-inferior-derecho-radio: 50px 100px; borde-inferior-izquierdo-radio: 50px 100px;

Esta técnica es adecuada para crear formas de bloques únicas. Por ejemplo, aquí se explica cómo crear un efecto de papel envuelto:

Cuadro (ancho: 200 px; alto: 200 px; fondo: #666; radio-borde-superior-izquierdo: 15em 1em; radio-borde-inferior-derecho: 15em 1em;)

Formularios CSS usando borde

Esta técnica muestra cómo se pueden crear formularios CSS, utilizando elementos sin dimensiones de alto y ancho. ¿Sorprendido? Veamos un ejemplo...

Para los siguientes ejemplos, usaremos el siguiente marcado:

...y el siguiente estilo básico:

Cuadro (ancho: 200 px; alto: 200 px; fondo: negro;)

El ejemplo más común de uso de formas CSS es la creación de una flecha envolvente. El secreto de esta flecha reside en crear un borde con un color diferente para cada lado. Luego, establezca los atributos de ancho y alto en 0.

Asignemos la clase de flecha al bloque div:

Flecha (ancho: 0; alto: 0; borde superior: 100 px rojo sólido; borde derecho: 100 px verde sólido; borde inferior: 100 px azul sólido; borde izquierdo: 100 px amarillo sólido;)

Para demostrarlo, primero usamos la sintaxis extendida. A continuación, podemos eliminar el código adicional usando la sintaxis abreviada:

Flecha (ancho: 0; alto: 0; borde: 100px sólido; color del borde: rojo verde azul amarillo;)

Interesante, ¿no? Ahora estableceremos colores transparentes en todos los lados excepto en el lado azul.

Flecha (ancho: 0; alto: 0; borde: 100px sólido; color del borde inferior: azul;)

¡Resultó genial! Pero esto contradice diseño semántico, cree un .arrow div, solo para agregar una flecha a la página. Para ello podemos utilizar pseudoelementos, que es lo que haremos ahora.

Crear un bocadillo

Para crear un bocadillo, necesitamos una pequeña porción de código CSS puro y un bloque div.

Bocadillo de diálogo (posición: relativa; color de fondo: #292929; ancho: 200 px; alto: 150 px; alto de línea: 150 px; /* centro vertical */ color: blanco; alineación de texto: centro;)

Bocadillo:después (contenido: "";)

En esta etapa crearemos la flecha que hicimos antes, la agregaremos al elemento y solo queda posicionarla:

Burbuja de diálogo:después (contenido: ""; posición: absoluta; ancho: 0; alto: 0; borde: 10px sólido; color del borde: rojo verde azul amarillo;)

Si queremos que la flecha apunte hacia abajo, tendremos que configurar todos los bordes como transparentes excepto el superior.

Burbuja de diálogo:después (contenido: ""; posición: absoluta; ancho: 0; alto: 0; borde: 10px sólido; color superior del borde: rojo;)

Cuando creamos este formulario CSS, no podemos especificar específicamente el tamaño de la flecha. En su lugar, podemos establecer la propiedad de ancho de borde, que asignará un tamaño a la flecha. También estableceremos la posición de la flecha en la parte inferior en el medio. En consecuencia, para ello utilizamos los valores superior e izquierdo.

Burbuja de diálogo:después ( contenido: ""; posición: absoluta; ancho: 0; alto: 0; borde: 15px sólido; color superior del borde: rojo; arriba: 100%; izquierda: 50%;)

Además, solo necesitamos darle un color igual al del bloque. Recuerde, al posicionar, debe tener en cuenta el tamaño de los otros bordes, que son invisibles (15 px). También le daremos al bloque redondeo en las esquinas.

Bocadillo ( /* … otros estilos */ radio-borde: 10px; ) .speech-bubble:after ( contenido: ""; posición: absoluta; ancho: 0; alto: 0; borde: 15px sólido; borde superior -color: #292929; arriba: 100%; margen izquierdo: -15px /* ajustar para el ancho del borde */)

No está mal, ¿eh? Usando varias clases de CSS y trucos de bordes, puedes crear tal cosa.

/* Uso de burbujas de discurso: aplique las clases .speech-bubble y .speech-bubble-DIRECTION como se muestra a continuación

*/ .speech-bubble ( posición: relativa; color de fondo: #292929; ancho: 200px; altura: 150px; altura de línea: 150px; /* centro verticalmente */ color: blanco; alineación de texto: centro; borde- radio: 10px; familia de fuentes: sans-serif; ) .speech-bubble:after ( contenido: ""; posición: absoluta; ancho: 0; alto: 0; borde: 15px sólido; ) /* Coloque la flecha */ .speech-bubble-top:después (borde-inferior-color: #292929; izquierda: 50%; abajo: 100%; margen-izquierdo: -15px; ) .speech-bubble-derecha:después (borde-izquierdo-color : #292929; izquierda: 100%; margen superior: -15px; .speech-bubble-bottom:after (borde-top-color: #292929; superior: 100%; izquierda: 50%; margen izquierdo: -15px ; ) .speech-bubble-left:after ( borde-derecho-color: #292929; arriba: 50%; derecha: 100%; margen-superior: -15px; )

¡Prima! Centrado vertical dentro del bloque

Para una línea de texto, puede utilizar la altura de línea. Pero si tiene dos o más líneas de texto... La mejor solución es establecer la propiedad de visualización en tabla y poner todo el texto en un párrafo. Así es como se ve en el marcado HTML: