Cornici e bordi. Doppio bordo usando i CSS

Vlad Merzhevich

Con i CSS, puoi aggiungere un bordo a un elemento in diversi modi. Fondamentalmente, ovviamente, la proprietà border è usata come la più universale, così come outline e, sorprendentemente, box-shadow, il cui compito principale è creare un'ombra. Successivamente, considereremo questi metodi e le loro differenze tra loro.

Struttura del profilo

La proprietà più semplice per la creazione di frame. Ha gli stessi parametri di border, ma differisce significativamente da esso in alcuni dettagli:

• il contorno è disegnato attorno all'elemento (il bordo è all'interno);
• il contorno non influisce sulle dimensioni dell'elemento (il bordo viene aggiunto alla larghezza e all'altezza dell'elemento);
• il contorno può essere impostato solo attorno all'intero elemento, non sui singoli lati (il bordo può essere utilizzato su qualsiasi lato o tutto in una volta);
• il contorno non è influenzato dal raggio di arrotondamento impostato dalla proprietà border-radius (il bordo è interessato).

La domanda sorge spontanea: in quali casi è necessario delineare, quando il suo ruolo, nonostante le differenze elencate, è assunto completamente dal confine? Non ci sono così tante situazioni, ma si verificano:

• creazione di complesse cornici multicolori;
• aggiungere un bordo a un elemento quando ci passi sopra con il cursore del mouse;
• nascondere il frame aggiunto automaticamente dal browser per alcuni elementi quando ricevono il focus;
• per un contorno, puoi impostare la distanza dal bordo di un elemento alla cornice utilizzando la proprietà di offset del contorno per creare.

Cornici multicolori

Dovrebbe essere chiaro che il contorno non sostituisce in alcun modo il confine e può benissimo coesistere con esso, come mostrato nell'esempio 1.

Esempio 1. Creazione di una cornice

In questo esempio, viene aggiunto un bordo nero attorno all'elemento, separato dallo sfondo da un bordo bianco (Fig. 1).

Riso. 1. Cornice intorno all'elemento

Cornice durante l'utilizzo: hover

L'aggiunta di un bordo attraverso il bordo aumenta la larghezza dell'elemento, il che è abbastanza evidente quando si combinano border e la pseudo-classe: hover. Ci sono due modi per "vincere" questo. La cosa più semplice è sostituire il bordo con il contorno, che sappiamo non ha alcun effetto sulle dimensioni dell'elemento (esempio 2).

Esempio 2. Bordo al passaggio del mouse

il contorno non è sempre adatto, se non altro perché l'arrotondamento dell'angolo non lo influenza. Qui è adatto il secondo metodo: aggiungi una cornice invisibile o una cornice che corrisponda al colore di sfondo, quindi modifica i suoi parametri al passaggio del mouse (esempio 3). Quindi non si verificherà alcuno spostamento dell'elemento, poiché la cornice esiste già dall'inizio. Ma ricorda sempre che la larghezza dell'elemento è la somma dei valori di larghezza, bordo a sinistra e bordo a destra. La situazione è simile con l'altezza.

Esempio 3. Inquadratura al passaggio del mouse

Bordo intorno ai campi del modulo

In alcuni browser (Chrome, Safari, le ultime versioni di Opera), viene visualizzato un piccolo bordo colorato attorno ai campi del modulo quando vengono attivati ​​(Figura 2). Per rimuoverlo, aggiungi semplicemente il valore none alla proprietà outline negli stili, come mostrato nell'esempio 4.

Riso. 2. Incornicia i campi

Esempio 4. Rimozione del telaio

Cornici tramite box-shadow

Sebbene la proprietà box-shadow abbia lo scopo di aggiungere un'ombra attorno a un elemento, può anche essere utilizzata per creare bordi che non possono essere eseguiti con un bordo o un contorno. Ciò è dovuto al fatto che il numero di ombre può essere illimitato, i cui parametri sono elencati separati da virgole.

Per ottenere la cornice, i primi tre parametri dovrebbero essere impostati a zero, sono responsabili della posizione dell'ombra e della sua sfocatura. Il quarto parametro in questo caso è responsabile dello spessore del bordo e il quinto imposta il colore del bordo. Per il secondo frame, il quarto parametro è la somma degli spessori dei due frame.

L'esempio 4 mostra come aggiungere due bordi e un bordo a destra utilizzando una proprietà box-shadow.

Esempio 4. Utilizzo di box-shadow

Il risultato di questo esempio è mostrato in Fig. 3.

Riso. 3. Cornici create dalla proprietà box-shadow

La proprietà CSS border crea un alias per creare il bordo di un oggetto, ovvero lo spessore del bordo, il suo colore e lo stile. Questa proprietà è ampiamente utilizzata in HTML. Puoi creare vari effetti per percepire meglio il contenuto della pagina. Ad esempio, progetta una barra laterale, un'intestazione del sito, un menu, ecc.

1. Sintassi del bordo CSS

confine: bordo-larghezza stile bordo bordo-colore | ereditare;

• larghezza del bordo - spessore del bordo. Puoi impostarlo in pixel (px) o utilizzare i valori standard sottile, medio, spesso (differiscono solo per la larghezza in pixel)
• border-style - lo stile del bordo renderizzato. Può assumere i seguenti valori
  • nessuno o nascosto - cancella il confine
  • punteggiato - cornice punteggiata
  • tratteggiato - cornice tratteggiata
  • solido - linea semplice (usata più spesso)
  • doppio - doppio bordo
  • scanalatura - bordo scanalato 3D
  • cresta, inserto, inizio - vari effetti di cornice 3D
  • eredita - viene applicato il valore dell'elemento genitore
• colore del bordo - colore del bordo. Può essere impostato utilizzando un nome di colore specifico o in formato RGB (vedi i nomi dei colori html per il sito)

Nota

I valori nella proprietà del bordo CSS possono essere specificati in qualsiasi ordine. La sequenza più comunemente usata è "colore stile spessore".

2. Esempi con bordi CSS differenti

2.1. Esempio. Diversi stili di decorazione del bordo in stile bordo

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 "

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали, как оформлять текст в CSS. В данной статье я бы хотел рассказать, что такое рамки в CSS и как их использовать. Правила, отвечающие за рамку состоят из трех элементов: толщина рамки, стиль и цвет. Давайте создадим файл index.html со следующим содержимым:

На этой же странице зададим стили для блока с id = tester (внутри заголовка страницы добавим следующие строки):

La proprietà border-width controlla la larghezza del bordo, la proprietà border-style controlla lo stile del bordo e border-color controlla il colore del bordo. Tutto è chiaro con la prima e la terza proprietà. Tutti i valori che la proprietà border-style può assumere sono mostrati nella figura sottostante:

Se ora apriamo la nostra pagina in un browser, vedremo che intorno al blocco è apparso un bordo rosso solido di 1 pixel.

Questo ti ho mostrato una lunga voce di frame CSS (questa voce è molto ingombrante e di solito nessuno la usa). Tutte le istruzioni possono essere adattate su una riga. Nel nostro caso, sarà simile a questo:

Bordo: 1px rosso fisso;

Quelli. prima specifichiamo lo spessore della cornice, poi specifichiamo lo stile e il colore della cornice.

Probabilmente hai notato che la cornice è apparsa su tutti e quattro i lati. Le cornici possono essere impostate separatamente per qualsiasi lato (sarà chiaro con un esempio specifico):

Bordo superiore: 2px rosso solido; bordo-basso: 3px verde punteggiato; bordo sinistro: 6px tratteggiato giallo; border-right: 5px double # fe54e5;

Puoi vedere che tutti e 4 i lati hanno cornici diverse. Se non imposti una cornice per qualche lato, di conseguenza, non ci sarà nessuna cornice.

I frame vengono utilizzati assolutamente ovunque: è quasi difficile trovare un design di un sito Web che non utilizzi i frame. Molto spesso, le voci di menu sono separate da una linea verticale, impostata solo dalla proprietà border-right o border-left. Puoi anche creare effetti interessanti sui link. Compiti a casa su questo argomento:

Devi creare una pagina e inserire 2 link su di essa. Lo stile di questi collegamenti è una linea continua; al passaggio del mouse, questa linea dovrebbe diventare tratteggiata.

È anche molto utile utilizzare i bordi sugli elementi quando si dispone la pagina per capire meglio dove si trova l'elemento. Almeno, è molto più chiaro e comprensibile per me da comporre.

Questa proprietà crea un bordo attorno all'elemento. Puoi leggere di più su questa proprietà qui e in questo articolo descriverò in termini generali come funziona. Queste informazioni saranno sufficienti per capire come creare bordi usando i CSS.

La sintassi per la proprietà border è semplice: border: 1px solid black; ... Questa proprietà ha tre significati:

• 1px - spessore del bordo.
• solid è il tipo di bordo, solid è una linea continua, double è una doppia linea continua, tratteggiata è una linea tratteggiata. Esistono molti altri tipi di bordi, puoi trovare informazioni su di essi qui: bordo CSS.
• nero - imposta il colore del bordo. I colori possono essere specificati per nome, i valori validi si trovano qui: tabella dei colori CSS o per codice esadecimale. Come farlo è scritto nell'articolo: Colori in CSS.

Cornice di testo CSS

Ecco un esempio di utilizzo della proprietà border per creare un bordo largo un pixel e nero:

A questo paragrafo è assegnata la classe example-1.

In questo esempio, abbiamo anche usato la proprietà padding CSS, o padding. Questa proprietà imposta la dimensione del rientro dal testo al tratto (bordo dell'elemento).

Diamo un'occhiata a un altro semplice esempio solo per prendere confidenza con il materiale. Crea un bordo largo tre pixel in rosso e senza padding (proprietà CSS padding).

A questo paragrafo è assegnata la classe example-2.

Come possiamo vedere, senza il padding padding, la cornice di testo sembra eccitata.

Come inquadrare un'immagine in CSS

Le cornici delle immagini vengono impostate in modo simile utilizzando la proprietà border. Creiamo un bordo verde di 4 pixel per l'immagine.

Esempio-img (bordo: 4px verde pieno;)

Ecco come funzionerebbe questo codice:

Come arrotondare gli angoli di un bordo in CSS

L'arrotondamento degli angoli di un bordo in CSS viene eseguito utilizzando la proprietà border-radius. Questa proprietà è stata introdotta nei CSS3 e funziona in tutti i browser moderni.

La proprietà border-radius può avere da uno a quattro valori. Se il valore è uno, imposta il grado di arrotondamento per tutti gli angoli. Diamo un esempio di come funzionerebbe questa proprietà a valore singolo.

Esempio-3 (bordo: 1px nero pieno; bordo-raggio: 15px; padding: 10px;)

È così che funziona:

Proprietà del raggio di confine: 15px.>

Se il blocco non ha bordi, allora c'è una larghezza di bordo del bordo: 0; , quindi l'area riempita con il colore di sfondo verrà arrotondata (proprietà background-color). Ecco un esempio:

Esempio-4 (border-width: 0; // sebbene questo valore sia 0 per impostazione predefinita background-color: #DDD; border-radius: 15px; padding: 10px;)

Ecco come funziona questo esempio:

Proprietà del raggio di confine: 15px.>

Come ho scritto prima, la proprietà border-radius può essere impostata da uno a quattro valori. La tabella seguente descrive come funzionerà ciascuna combinazione di valori.

Per la proprietà border-radius, i valori possono essere specificati in percentuale.

Disegniamo un cerchio in CSS. Per fare ciò, prendi un blocco quadrato di 100 per 100 pixel e arrotonda gli angoli con CSS usando la regola del raggio del bordo: 50%.

Esempio 5 (larghezza: 100 px; altezza: 100 px; colore di sfondo: # F00; raggio del bordo: 50%;)

Ecco come funziona questo esempio:

Questo copre l'intero argomento dei "frame nei CSS". Buona fortuna con l'apprendimento dei CSS!

La proprietà generica del bordo viene utilizzata per controllare il bordo di un elemento. Questa proprietà consente di impostare la larghezza, lo stile e il colore del bordo di un elemento in una singola dichiarazione.

Queste tre proprietà (spessore, stile e colore del bordo) possono essere impostate in un'unica dichiarazione. Ecco un esempio:

È possibile specificare uno stile del bordo su un solo lato di un elemento. Per fare ciò, usa le proprietà border-top (bordo superiore), border-right (bordo destro), border-bottom (bordo inferiore), border-left (bordo sinistro).

In questo esempio, ogni lato della scatola ha uno spessore, uno stile e un colore del bordo diversi.

Considera come puoi creare una forma come questa usando i CSS:

I valori del bordo - spessore, stile e colore - possono essere impostati separatamente utilizzando proprietà speciali.

• border-style - lo stile del bordo.
• larghezza del bordo - la larghezza del bordo.
• colore del bordo - colore del bordo.

Consideriamo ciascuno dei valori separatamente.

La proprietà in stile confine. Stile del bordo.

La proprietà border-style imposta lo stile del bordo. In CSS, a differenza dell'HTML, il bordo di un elemento può essere più di un semplice solido. I valori validi per lo stile del bordo sono:

1. nessuno - nessun bordo (predefinito).
2. solido - bordo solido.
3. doppio - doppio bordo.
4. tratteggiato - bordo tratteggiato.
5. punteggiato - Un bordo composto da una serie di punti.
6. cresta - bordo della cresta.
7. scanalatura - bordo della scanalatura.
8. inset - un bordo rientrato.
9. fin dall'inizio - bordo estruso.

Esempi di come sono.

nessun confine (nessuno)

bordo solido

doppio bordo

bordo punteggiato

bordo tratteggiato

bordo scanalatura

bordo di cresta

bordo inserto

fin dall'inizio

A proposito, se imposti il ​​colore del bordo su nero per la cornice del colmo, ottieni il seguente risultato.

Un div con bordo nero e stile cresta.

Il bordo sembra solido, ma questo perché lo stile della cresta viene creato aggiungendo un effetto ombra esterna nera e l'effetto nero sul bordo nero non è visibile.

Utilizzando la proprietà border-style, lo stile del bordo può essere impostato per più di tutti i lati del blocco. È possibile impostare più valori per una proprietà di stile del bordo, a seconda del numero di valori, lo stile del bordo verrà assegnato a un diverso numero di lati del blocco. È possibile impostare uno, due, tre e quattro valori. Diamo un'occhiata agli esempi per ogni caso.

Un valore (solido): lo stile del bordo è impostato per tutti i lati del blocco.

Due valori (doppio solido): il primo valore imposta lo stile per i lati superiore e inferiore, il secondo per il lato.

Tre valori (doppio punto fisso): il primo valore per il lato superiore, il secondo per il lato, il terzo per il fondo.

Quattro valori (solido doppio tratteggiato tratteggiato): ogni valore per un lato in senso orario a partire dall'alto.

La proprietà della larghezza del bordo. Spessore del bordo.

La proprietà border-width viene utilizzata per impostare lo spessore del bordo di un elemento. Lo spessore del bordo può essere specificato in qualsiasi unità di misura assoluta, come i pixel.

Come con la proprietà in stile bordo, anche la proprietà può essere impostata su uno o quattro valori. Diamo un'occhiata agli esempi per ogni caso.

Codice di esempio:

Esistono anche valori di parole chiave per la proprietà di larghezza del bordo. Ce ne sono tre:

• sottile - bordo sottile;
• medio - medio spessore;
• spesso - bordo spesso;

Spessore bordo: sottile.

Spessore bordo: medio.

Spessore bordo: spesso.

La proprietà border-color. Colore del bordo.

La funzione di colore del bordo viene utilizzata per controllare il colore del bordo. I colori per questa proprietà possono essere impostati utilizzando qualsiasi metodo descritto nell'articolo "Colori in CSS", ovvero:

• Notazione esadecimale (# ff00aa) del colore.
• Formato RGB - rgb (255,12,110). Formato RGBA per CSS3.
• Formati HSL e HSLA per CSS3.
• Il nome del colore, ad esempio nero. Per un elenco completo dei nomi dei colori, vedere la tabella dei nomi dei colori CSS.

La proprietà border-color può anche avere da uno a quattro valori e li gestisce allo stesso modo delle proprietà precedenti.

Un valore (rosso).

Due valori (rosso nero).

Tre significati (rosso nero giallo).

Quattro significati (rosso nero giallo blu).

Ora torniamo al problema delineato sopra e disegniamo una forma:

Ecco il codice che disegna una tale forma, solo di dimensioni maggiori:

Impostazione dei valori per i lati separatamente

Come accennato in precedenza, puoi specificare i valori delle proprietà del bordo solo per un lato di un blocco. Per questi scopi, ci sono proprietà:

• border-top (bordo superiore)
• bordo destro (bordo destro)
• bordo-basso (bordo inferiore)
• bordo-sinistro (bordo sinistro)

Lascia che ti ricordi che tutte le proprietà hanno tre valori (spessore, stile e colore) in qualsiasi ordine. Ma ci sono proprietà che ti permettono di impostare lo spessore, il colore e lo stile per ogni lato separatamente. La scrittura di queste proprietà è derivata da quanto sopra.

Opzioni del bordo superiore (bordo-alto).

• border-top-color - Imposta il colore del bordo superiore dell'elemento.
• border-top-width - Imposta lo spessore del bordo superiore dell'elemento.
• border-top-style - Imposta lo stile del bordo superiore di un elemento.

Opzioni del bordo destro (bordo-destro).

• border-right-color - Imposta il colore del bordo destro di un elemento.
• border-right-width - Imposta la larghezza del bordo destro di un elemento.
• border-right-style - Imposta lo stile del bordo destro di un elemento.

Parametri inferiori (bordo-basso).

• border-bottom-color - imposta il colore del bordo inferiore dell'elemento.
• border-bottom-width - Imposta la larghezza del bordo inferiore dell'elemento.
• border-bottom-style - Imposta lo stile del bordo inferiore di un elemento.

Opzioni del bordo sinistro (bordo sinistro).

• border-left-color - Imposta il colore del bordo sinistro dell'elemento.
• border-left-width - Imposta la larghezza del bordo sinistro dell'elemento.
• border-left-style - Imposta lo stile del bordo sinistro dell'elemento.

Un esempio di utilizzo di queste proprietà:

Proprietà del raggio di confine. Arrotondamento degli angoli del confine.

La proprietà border-radius serve per arrotondare gli angoli dei bordi di un elemento. Questa proprietà è stata introdotta in CSS3 e funziona correttamente in tutti i browser moderni tranne Internet Explorer 8 (e precedenti).

I valori possono essere qualsiasi numero utilizzato nei CSS.

La proprietà del raggio di confine è 15px.

Se la cornice del blocco non è specificata, l'arrotondamento avviene con lo sfondo. Ecco un esempio di arrotondamento di una casella senza bordo, ma con un colore di sfondo:

La proprietà del raggio di confine è 15px.

Esistono proprietà per arrotondare singolarmente ogni angolo di un elemento. Questo esempio li usa tutti:

Raggio bordo in alto a sinistra: 15 px; bordo-in alto-a destra-raggio: 0; bordo-basso-destra-raggio: 15px; bordo-basso-sinistro-raggio: 0;

La proprietà del raggio di confine è 15px.

Sebbene questo codice possa essere scritto in una dichiarazione: border-radius: 15px 0 15px 0. Il punto è che la proprietà border-radius può essere impostata da uno a quattro valori. La tabella seguente elenca le regole che regolano tali annunci.

Dopo aver studiato attentamente questa tabella, puoi capire che il record più breve dello stile richiesto sarà così: border-radius: 15px 0. Ci sono solo due valori.

Un po' di pratica

Come disegnare un limone usando i CSS.

Ecco il codice per un tale blocco:

Margine: 0 automatico; / * Posiziona il blocco al centro * / width: 200px; altezza: 200px; sfondo: # F5F240; bordo: 1px solido # F0D900; raggio del bordo: 10px 150px 30px 150px;

Abbiamo già disegnato la forma:

Ora lasciamo un triangolo da esso:

Il codice del triangolo è così:

Margine: 0 automatico; / * Posiziona il blocco al centro * / padding: 0px; larghezza: 0px; altezza: 0; bordo: 30px bianco solido; colore bordo-fondo: rosso;