Línea fronteriza. CSS: borde. Límites de elementos. Ejemplo. Diferentes estilos de diseño de bordes estilo de borde

En el artículo anterior hablamos aplicando CSS propiedades border() de los elementos de la página. Y te prometí que te diría cómo usar imágenes para dibujar bordes. De esto es de lo que hablaremos hoy.

Para usar imágenes para crear bordes, usaremos la propiedad CSS border-image.

El grosor de los bordes lo establece la propiedad y, si se especifica border: 0, el borde no se muestra. Con otros valores de borde, la imagen siempre tiene prioridad. El fondo, si se especifica mediante la propiedad de fondo, se muestra debajo del marco.

Sintaxis de código

Veamos un ejemplo de registro de propiedad:

imagen-borde: url (images/bg-image.png) 30 vueltas;

url (images/bg-image.png): dirección de la imagen de fondo.

30 - puede haber uno, dos, tres o cuatro valores que indican los tamaños de partes de la imagen en píxeles, definiendo así las áreas de división de la imagen. Las unidades en sí no están escritas, sólo el número (10, no 10px). En la figura, las líneas rojas resaltan las áreas necesarias para crear el marco.

Puedes utilizar uno, dos, tres o cuatro valores, separados por un espacio. El efecto depende de la cantidad de valores y se muestra en la tabla.

round round: dos parámetros (para bordes horizontales y verticales, respectivamente). Puede tomar uno de tres valores. El resultado se puede ver en las imágenes.

estirar— Estira el dibujo del borde al tamaño del elemento. Este es el valor predeterminado.
repetir— Repite el patrón del borde.
redondo— Repite el dibujo y lo escala para que haya un número entero de imágenes en el lado del elemento.

Compatibilidad del navegador

Lamentablemente, no todas las versiones de navegadores admiten la propiedad border-image. Para mejor compatibilidad Es recomendable registrar la propiedad para todos los navegadores.

Código de muestra:

estilo de borde: sólido; ancho de borde: 27px; -moz-border-image: url (http://mysite.ru/border.png) tramo de 27 vueltas; -webkit-border-image: url (http://mysite.ru/border.png) tramo de 27 vueltas; -o-border-image: url (http://mysite.ru/border.png) tramo de 27 vueltas; imagen de borde: URL (http://mysite.ru/border.png) tramo de 27 vueltas;

Automatización

Hay herramientas en la web que nos ayudan a escribir código. Para propiedades de borde-image es un constructor muy conveniente. Simplemente carga tu imagen de borde allí (por cierto, puedes encontrar muchas en Internet). Usando los controles deslizantes, divida la imagen en áreas, establezca el grosor del borde y los parámetros de repetición.

Además, inmediatamente, en modo en línea ves el resultado (lo que pasa al final).

Cuando logres el resultado deseado, todo lo que tienes que hacer es copiar el código generado y pegarlo en el código de la página (archivo css).

Muy simple y conveniente.

Conclusión

Con esto concluye nuestra discusión sobre las propiedades de borde en CSS. No te voy a decir adiós. En un futuro próximo seguiremos formándonos en maquetación. Suscríbete a las actualizaciones...y...¡Nos vemos!

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 coincide 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

EN en este ejemplo Se 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

Navegador explorador de Internet hasta la sexta versión inclusive, con un grosor de borde de 1 px, se muestra punteado como discontinuo. 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.

Estilo de borde en diferentes navegadores puede variar ligeramente cuando se utilizan valores de ranura, cresta, inserción o salida.

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.

×

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. puedes crear varios efectos para una mejor percepción del 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 - linea simple(usado con mayor frecuencia)
  • doble - doble marco
  • ranura - borde 3D ranurado
  • cresta, inserción, inicio: varios efectos de marco 3D
  • heredar - el valor se aplica elemento padre
• color del borde - color del borde. Se puede configurar usando nombre específico colores 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, en diferencias HTML, el borde de un elemento no solo puede ser sólido. Se permiten 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. surco - borde "surco".
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 es marco negro no visible.

Con ayuda propiedades de estilo de borde El estilo del borde se puede configurar no sólo para todos los lados del bloque. Es posible establecer varios valores para una propiedad de estilo de borde, dependiendo de la cantidad de valores, se asignará el estilo de borde; numero diferente 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 establecer en cualquier unidades absolutas medidas, 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 para la propiedad de ancho de borde hay valores en el formulario palabras clave. 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.
• formato RGB-rgb(255,12,110). formato RGBA para CSS3.
• formatos HSL y HSLA para CSS3.
• Nombre del color, por ejemplo negro. Lista llena Los nombres de los colores se proporcionan en 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 (borde superior)
• frontera-derecha
• 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 apareció en CSS3 y funciona correctamente en todos navegadores modernos, a excepción de 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, puedes entender que la mayoría nota corta 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;

borde CSS elemento es una o más líneas que rodean el contenido del elemento y su relleno. El marco se establece usando propiedad corta borde . El estilo del marco se establece mediante tres propiedades: estilo, color Y ancho.

Decorar marcos y bordes de elementos HTML usando propiedades CSS

1. Estilo de borde

De forma predeterminada, los marcos siempre se dibujan encima del fondo del elemento, y el fondo se extiende hasta el borde exterior del elemento. El estilo del marco determina su visualización; sin esta propiedad, los marcos no serán visibles en absoluto. Para un elemento, puede establecer un borde para todos los lados simultáneamente usando la propiedad de estilo de borde, o para cada lado por separado usando las propiedades calificadas de estilo de borde superior, etc. No heredado.

estilo de borde (estilo de borde superior, estilo de borde derecho, estilo de borde inferior, estilo de borde izquierdo)
Valores:
ninguno	El valor predeterminado significa sin marco. También elimina el borde de un elemento de un grupo de elementos con un valor establecido de esta propiedad.
oculto	Equivalente a ninguno.
punteado	punteado
discontinuo	discontinuo
sólido	sólido
doble	doble
ranura	ranura
cresta	cresta
recuadro	recuadro
comienzo	comienzo
{1,4}	Listar cuatro estilos diferentes para el borde de un elemento a la vez, solo para la propiedad de estilo de borde: (estilo de borde: sólido con puntos, sin puntos;)
inicial
heredar

Sintaxis

P (estilo de borde: sólido;) p (estilo de borde superior: sólido;)

2. Color del marco color del borde

La propiedad establece el color de los marcos en todos los lados al mismo tiempo. Usando las propiedades de clarificación, puede establecer un color diferente para el borde de cada lado del elemento. Si no se especifica ningún color para el marco, será el mismo que el color del texto del elemento. Si el elemento no tiene texto, el color del borde será el mismo que el color del texto del elemento principal. No heredado.

color del borde (color-borde-superior, color-borde-derecho, color-borde-inferior, color-borde-izquierdo)
Valores:
transparente	Instalaciones color transparente para el marco. Al mismo tiempo, se mantiene el ancho del marco. Se puede utilizar para cambiar el color del borde al pasar el mouse sobre un elemento para evitar que el elemento se desplace.
color	El color de los marcos se establece utilizando los valores de la propiedad. (color del borde: #cacd58;)
{1,4}	Transferencia simultánea de cuatro Colores diferentes para bordes de elementos, solo para la propiedad border-color: (color del borde: #cacd58 #5faf8a #b9cea5 #aab238;)
inicial	Establece el valor de la propiedad en el valor predeterminado.
heredar	Hereda el valor de la propiedad del elemento padre.

Sintaxis

P (color del borde: #cacd58;)

3. Ancho de borde

El ancho del marco se especifica mediante unidades de longitud o palabras clave. Si la propiedad de estilo de borde se establece en ninguno y el borde del elemento se establece en un ancho determinado, entonces en este caso El ancho del marco se establece en cero. No heredado.

Sintaxis

P (ancho de borde: 2px;)

4. Establecer un marco con una propiedad

La propiedad de borde le permite combinar las siguientes propiedades: ancho de borde, estilo de borde, color de borde, por ejemplo:

Div (ancho: 100 px; alto: 100 px; borde: 2 px gris sólido;)

En este caso, las propiedades especificadas se aplicarán a todos los bordes del elemento simultáneamente. Si no se especifica algún valor, el valor predeterminado ocupará su lugar.

5. Establecer un marco para un borde de un elemento

En el caso de que necesite establecer un estilo diferente para los bordes de un elemento, puede utilizar nota corta para el límite correspondiente.
Las propiedades que se enumeran a continuación combinan las siguientes propiedades en una sola declaración: ancho de borde, estilo de borde y color de borde. La lista de propiedades se especifica en un orden determinado, mientras que se pueden omitir uno o dos valores, en cuyo caso sus valores tomarán los valores predeterminados.

El estilo del borde superior se establece utilizando la propiedad border-top, el inferior - border-bottom, el izquierdo - border-left y el derecho - border-right.

Sintaxis

P (borde superior: 2px gris sólido;)

6. Contorno del contorno externo

La propiedad especifica el borde exterior alrededor de los elementos (es decir, fuera frontera normal). El objetivo principal de esta propiedad es resaltar un elemento. A diferencia de la propiedad de borde, la aplicación de esta propiedad no afecta el tamaño o la posición del elemento, porque el contorno se muestra en la parte superior del bloque de elementos, lo que a su vez puede provocar una superposición márgenes elemento y zonas vecinas.

Además, el contorno exterior, a diferencia del marco del elemento, rodea el elemento por todos lados, enmarcándolo por completo.

El contorno exterior siempre es rectangular y no sigue el borde del bloque para el que se especifica el radio de borde.

La propiedad de contorno le permite combinar las siguientes propiedades: color de contorno, estilo de contorno, ancho de contorno. Si no se especifica algún valor, el valor predeterminado ocupará su lugar.

Div (ancho: 100 px; alto: 100 px; contorno: #cacd58 sólido 2 px;)

6.1. estilo de contorno

Vista de línea contorno exterior se establece de manera similar al estilo del marco del elemento. No heredado.

Sintaxis

P (estilo de contorno: cresta;)

6.2. Color del contorno exterior color del contorno

El color del contorno exterior sólo se puede especificar cuando valor ajustado estilo de contorno. No heredado.

Sintaxis

P (estilo de contorno: cresta; color de contorno: plateado;)

6.3. Grosor del contorno exterior ancho del contorno

El grosor de la línea de contorno exterior se establece de forma similar al grosor del marco del elemento. No heredado.

Sintaxis

P (estilo de contorno: punteado; ancho de contorno: 5px;)