Ulkokehys css. CSS-täyte ja reunat. Aseta raja yhdelle elementille

CSS3 kehys laajentaa kykyä muotoilla elementtien reunoja ominaisuuksilla, jotka sallivat kulmien ympäri elementtiä ja myös käyttöä Kuvat elementin reunojen suunnitteluun.

Pyöristetyt kulmat ja kuvakehykset

1. Kulmien pyöristys reunasäteellä

Selaimen tuki

IE: 9.0
Firefox: 4.0
Kromi: 4.0
Safari: 5.0, 3.1 -verkkopaketti-
Ooppera: 10.5
iOS Safari: 7.1
Ooppera Mini: —
Android-selain: 4.1
Kromi Androidille: 44

Ominaisuuden avulla voit pyöristää pienten ja pienten kirjainten kulmia lohkon elementit. Kunkin kulman käyrä määritellään yhdellä tai kahdella sen muodon määrittävällä säteellä − ympyrä tai ellipsi. Säde koskee koko taustaa, vaikka elementillä ei olisi reunuksia, tarkka sijainti Sekantti määritetään background-clip-ominaisuuden avulla.

Rajaussäde-ominaisuuden avulla voit pyöristää kaikkia kulmia kerralla, ja käyttämällä border-top-vasen-säde, border-top-right-radius, border-bottom-right-radius, border-bottom-vasen säde ominaisuuksia voi pyörittää jokaisen kulman erikseen.

Jos määrität kaksi arvoa rajan ominaisuuksia-radius , ensimmäinen arvo pyöristetään ylävasen Ja oikeassa alakulmassa ja toinen - Yläoikea Ja alhaalla vasemmalla.

Arvot määritetään / määrittää vaakasuoraan Ja pystysuorat säteet. Omaisuutta ei ole peritty.

Vaihtoehdot

Div (leveys: 100px; korkeus: 100px; reunus: 5px kiinteä;).r1 (border-radius: 0 0 20px 20px;).r2 (border-radius: 0 10px 20px;).r3 (border-säde: 10px 20px - (reunuksen säde: 50 %;).r8 (reunus-ylä: ei mitään; reunus-ala: ei mitään; reuna-säde: 30px/90px;).r9 (reuna-ala-vasen-säde: 100px;).r10 ( reuna -säde: 0 100 %;).r11 (reunuksen säde: 0 50 % 50 % 50 %;).r12 (reuna-ylä-vasen-säde: 100 % 20px; reunus-alha-oikea-säde: 100 % 20px ;)
Riisi. 1. Esimerkkejä erilaisia ​​vaihtoehtoja pyöristää lohkon kulmat

2. Reunakuva

Selaimen tuki

IE: 11.0
Firefox: 15.0, 3.5 -moz-
Kromi: 16.0, 7.0 -webkit-
Safari: 6.0, 3.0 -webkit-
Ooppera: 15.0, 11.0 -o-
iOS Safari: 7.1
Ooppera Mini: 8 -o-
Android-selain: 4.4, 4.1 -verkkopaketti-
Chrome Androidille: 42

Ominaisuuden avulla voit asettaa kuvan elementin kehykseksi. Kuvan päävaatimus on, että sen on oltava symmetrinen. Ominaisuus sisältää seuraavat arvot: (border-image: leveys lähdeviipaleen toiston alkuun;) .

Tämän avulla yksinkertainen kuva Voit saada nämä kehykset elementille.

/* Esimerkki 1 */ div ( leveys: 260px; korkeus: 100px; reunuksen tyyli: kiinteä; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30 ; border-image-repeat: stretch; 2 Esimerkki 2 png); border-image-slice: 30 border-image-repeat: round);
Riisi. 2. Esimerkki lohkorajojen suunnittelusta kuvan avulla

Leikkaukset A - B - C - D muodostavat rungon kulmat, ja niiden välissä oleva kuvion osa täyttää rungon jäljellä olevan tilan kehyksen mukaisesti. annettu arvo border-image-repeat-ominaisuudet. Kulman koko (in tässä esimerkissä tämä on numero 30) on määritetty käyttämällä border-image-slice -ominaisuuden arvoa.

2.1. raja-kuvan leveys

Ominaisuus määrittää kuvan leveyden elementin reunalle. Jos leveyttä ei ole määritetty, se on oletuksena 1.

raja-kuvan leveys
Arvot:
pituus	Asettaa reunuksen leveyden pituusyksiköissä - px/em. Voit asettaa yhdestä neljään arvoa kerrallaan. Jos yksi arvo on määritetty, niin kehyksen kaikkien sivujen leveys on sama, kaksi arvoa määrittävät ylhäältä alas ja oikealta vasemmalle jne.
määrä	Numeerinen arvo, jolla reunan leveyden arvo kerrotaan.
%	Elementin reunuksen leveys lasketaan suhteessa kuvan kokoon. Vaaka suhteessa leveyteen, pystysuora - suhteessa korkeuteen.
auto	Vastaa border-image-slice -arvoa.
alkukirjain
periä

Syntaksi

Div (reunakuvan leveys: 30 pikseliä;) Kuva. 3. Esimerkki kuvakehyksen leveyden asettamisesta käyttämällä erilaisia ​​tyyppejä arvot

2.2. border-image-source

Ominaisuus määrittää polun kuvaan, jota käytetään koristamaan lohkon reunoja.

Syntaksi

Div (border-image-source: url(border.png);)

2.3. border-image-slic -elementit

Ominaisuus määrittää elementin reunojen määrittämiseen käytettyjen kuvaosien koon ja jakaa kuvan yhdeksään osaan: neljään kulmaan, neljään kulmien väliseen reunaan ja keskiosaan.

Arvot:
määrä	Runko-osien koko voidaan asettaa yhdellä, kahdella, kolmella tai neljällä arvolla. Yksi arvo asettaa rajat sama koko elementin kummallekin puolelle. Kaksi arvoa: ensimmäinen määrittää ylä- ja alareunojen koon, toinen - oikean ja vasemman reunan koon. Kolme arvoa: ensimmäinen määrittää yläreunan koon, toinen - oikea ja vasen ja kolmas - alareunus. Neljä arvoa: määrittää ylä-, oikea-, ala- ja vasemman reunan koot. Numeerinen arvo edustaa kuvapisteiden määrää.
%	Reunusten koot lasketaan suhteessa kuvan kokoon. Vaaka suhteessa leveyteen, pystysuora - suhteessa korkeuteen.
täyttää	Arvo ilmoitetaan yhdessä numeron tai prosentin kanssa. Jos määritetty, kuvaa ei leikkaa kehyksen sisäreuna, vaan se täyttää myös kehyksen sisällä olevan alueen.
alkukirjain	Asettaa tämän ominaisuuden oletusarvoon.
periä	Peri tämän omaisuuden arvon pääelementti.

Syntaksi

Div (reunakuva: 50 20;)
Riisi. 4. Esimerkki kuvakehysosien määrittämisestä

2.4. raja-kuva-toisto

Kiinteistöjen hallintapaneelit taustakuva tilaa kehyksen kulmien väliin. Voidaan määrittää käyttämällä joko yhtä arvoa tai arvoparia.

Syntaksi

Div (border-image-repeat: toista;) Kuva. 5. Esimerkki kuvakehyksen keskiosan toistamisesta käyttämällä erilaisia ​​arvoja

2.5. border-image-outset

Ominaisuuden avulla voit siirtää kuvakehystä elementin rajojen ulkopuolelle määritetyn pituuden verran. Voidaan määrittää käyttämällä yhtä tai neljää arvoa.

Syntaksi

Div (reunus-kuva-alku: 10px;)
Riisi. 6. Esimerkki kuvakehyksen siirtämisestä erityyppisten arvojen avulla

3. Ulkokehyksen poikkeama ääriviiva-offset

Omaisuus määrittää rajan välisen etäisyyden reunaelementti ja ulkoreuna, joka on luotu käyttämällä outline-ominaisuutta.

/*Kuva 1:*/ img ( reunus: 1px tasainen vaaleanpunainen; ääriviivat: 1px katkoviivoinen harmaa; ääriviivojen siirtymä: 3px; ) /*Kuva 2:*/ img ( reunuksen leveys: 1px 10px; reunuksen tyyli: kiinteä; reunan väri: vaaleanpunainen: 1px katkoviiva-offset: 3px;
Riisi. 7. Esimerkki kuvan sisustamisesta ulkokehyksellä

4. Gradienttikehys

Reunuskuvan arvo voi olla paitsi kuva, myös gradienttitäyttö.

Läpinäkyvä kehys

Yksi väreistä on läpinäkyvä. Tällä tavalla voit asettaa rajat elementin kaikille sivuille kerralla tai erikseen kullekin sivulle. Reunan paksuutta ohjaa rajan leveysominaisuus.

* (box-sizing:border-box;).wrap (korkeus: 200px; täyte: 25px; tausta: #00E4F6; ) .gradient (korkeus: 150px; leveys: 50%; marginaali: 0 automaattinen; reunus: 10px kiinteä läpinäkyvä rajakuva: lineaarinen gradientti (oikealle, läpinäkyvä 0%, #ADF2F7 100%);

Postikuori

* (box-sizing:border-box;).wrap (korkeus: 200px; täyte: 25px; ) .gradient (korkeus: 150px; leveys: 50%; marginaali: 0 automaattinen; reunus: 10px kiinteä läpinäkyvä; reunuskuva: 10 toistuvaa lineaarista gradienttia (45 astetta, #A7CECC, #A7CECC 10px, läpinäkyvä 10px, läpinäkyvä 20px, #F8463F 20px, #F8463F 30px, läpinäkyvä 30px, läpinäkyvä 40px)

CSS border -ominaisuutta käytetään objektin reunuksen luomiseen, nimittäin reunuksen paksuuden, värin ja tyylin luomiseen. Tätä ominaisuutta käytetään laajalti HTML:ssä. Voit luoda erilaisia ​​tehosteita nähdäksesi paremmin sivun sisällön. Suunnittele esimerkiksi sivupalkki, verkkosivuston otsikko, valikko jne.

1. CSS-reunuksen syntaksi

raja: reunan leveys reunustyylinen reunusväri| periä;

• border-width - reunan paksuus. Voit asettaa sen pikseleinä (px) tai käyttää vakioarvot ohut, keskikokoinen, paksu (ne eroavat vain pikselin leveydestä)
• border-style - näytettävän reunuksen tyyli. Voi ottaa seuraavat arvot
  • ei mitään tai piilotettu - peruuttaa reunuksen
  • pilkullinen - pilkullinen kehys
  • katkoviiva - viivoista tehty kehys
  • kiinteä - yksinkertainen linja(usein käytetty)
  • kaksinkertainen - kaksoiskehys
  • groove - uritettu 3D-reunus
  • harjanne, sisäosa, alku - erilaisia ​​3D-kehystehosteita
  • inherit - emoelementin arvoa käytetään
• border-color - reunuksen väri. Voidaan asettaa käyttämällä tietty nimi värit tai RGB-muoto(katso sivuston html-värien nimet)

Huomautus

CSS border -ominaisuuden arvot voidaan asettaa missä tahansa järjestyksessä. Yleisimmin käytetty sarja on "paksuustyylinen väri".

2. Esimerkkejä erilaisilla CSS-rajoilla

2.1. Esimerkki. Erilaiset reunasuunnittelutyylit reunatyyliin

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, отвечающие за оформление рамок, начинаются со слова «border», которое как раз и можно перевести как «Рамка», «Граница». Наличие и формат внешнего контура задаются свойствами, начинающимися словом «outline». Outline, в отличие от border, не влияет на ширину и положение обрамляемого блока. Кроме того, его нельзя установить только с одной стороны, как border - только со всех сторон сразу.

Сначала поговорим об оформлении border, потом перейдём к outline .

border-width

Задаёт ширину границ. Понятно, что по умолчанию элемент окружён рамками с четырёх сторон. Свойство позволяет задать ширину границ как для всех сторон одинаковую, так и разную для каждой стороны. В зависимости от того, какую ширину каким границам нужно присвоить, в правиле можно указать от одного до четырёх значений.

Задавать ширину можно как с помощью привычных пикселей, процентов и других единиц длины CSS, так и зарезервированными словами thin (2px), medium (4px) и thick (6px).

Border-width: 16px 12px 4px 8px;

border-style

Определяет стиль рамки. Обратите внимание: если не задать это правило, но указать свойство border-width , то рамок вообще не будет, так что если хотите видимые границы, обязательно укажите border-style .

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

Последний абзац показывает, что стиль, как и толщина, у рамки с каждой стороны может быть собственным:

border-style: solid double dotted none

border-color

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

Border-color: #C85EFA;

border

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

P { border: 2px solid green; }

Для настройки разных правил рамкам с разных сторон можно использовать следующие значения:

• border-top - верхняя граница.
• border-right - правая.
• border-bottom - нижняя.
• border-left - левая.

P { border-left: 6px dotted yellow; }

outline-width

То же самое, что и border-width , только для внешней, а не внутренней рамки. Задаёт толщину контура в тех же значениях, что и border-width . Кроме толщины обрамления элемента нужно указать его стиль, иначе контура не будет.

outline-style

Значения свойства дублируют значения border-style . Правило задаёт стиль внешнего контура.

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

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

Bord-width-ominaisuus vastaa reunuksen leveydestä, border-style-ominaisuus vastaa reunuksen tyylistä ja border-color-ominaisuus vastaa reunuksen väristä. Ensimmäisen ja kolmannen ominaisuuden kanssa kaikki on selvää. Kaikki arvot, jotka border-tyylinen ominaisuus voi saada, on esitetty alla olevassa kuvassa:

Jos nyt avaamme sivumme selaimessa, huomaamme, että lohkon ympärille on ilmestynyt kiinteä punainen kehys, jonka leveys on 1px.

Näytin sinulle pitkän kehyksen merkinnän CSS:ssä ( tämä merkintä on erittäin hankala eikä yleensä kukaan käytä sitä). Kaikki ohjeet voidaan sisällyttää yhdelle riville. Meidän tapauksessamme se näyttää tältä:

Reuna: 1px tasainen punainen;

Nuo. Ilmoitamme ensin kehyksen paksuuden, sitten kehyksen tyylin ja värin.

Olet todennäköisesti huomannut, että kehys ilmestyi kaikilta neljältä sivulta. Kehykset voidaan asettaa mille tahansa sivulle erikseen (päällä konkreettinen esimerkki se tulee selväksi):

Yläreunus: 2px tasainen punainen; reuna-ala: 3px katkovihreä; reunus vasen: 6px katkoviiva keltainen; reuna-oikea: 5px double #fe54e5;

Näet, että kaikilla 4 puolella on erilaisia ​​kehyksiä. Jos et määritä kehystä jollekin puolelle, siellä ei ole kehystä.

Kehyksiä käytetään ehdottomasti kaikkialla: on melkein vaikea löytää verkkosivuston suunnittelua, jossa ei käytetä kehyksiä. Hyvin usein valikon kohdat erotetaan pystyviivalla, joka määritellään border-right- tai border-left-ominaisuuden avulla. Voit myös tehdä mielenkiintoisia tehosteita linkeissä. Kotitehtävä juuri tästä aiheesta:

Sinun on luotava sivu ja asetettava sille 2 linkkiä. Näiden linkkien suunnittelutyyli on kiinteä viiva, kun leijuu viiva, siitä tulee katkoviiva.

On myös erittäin hyvä käyttää kehyksiä elementeille sivua asetettaessa, jotta ymmärtäisi paremmin, missä kukin elementti sijaitsee. Tekijä: vähintään, minun on paljon selkeämpää ja selkeämpää kirjoittaa.

Tämä ominaisuus luo reunuksen elementin ympärille. Voit lukea lisää tästä kiinteistöstä linkistä, ja tässä artikkelissa kuvailen yleisesti, kuinka se toimii. Nämä tiedot riittävät ymmärtämään, kuinka kehyksiä tehdään CSS:n avulla.

Reunusominaisuuden syntaksi on yksinkertainen: border: 1px solid black; . Tällä ominaisuudella on kolme merkitystä:

• 1px - reunan paksuus.
• kiinteä - kehystyyppi, kiinteä on yhtenäinen viiva, double on kaksoiskiinteä viiva, katkoviiva on katkoviiva. Reunuksia on useita muitakin, niistä löydät tietoa täältä: CSS border.
• musta - määrittää reunan värin. Värit voidaan määrittää nimellä, kelvollisia arvoja ovat täällä: CSS-väritaulukko tai heksadesimaalikoodi. Kuinka tämä tehdään, on kuvattu artikkelissa: värit CSS:ssä.

CSS-tekstikehys

Tässä on esimerkki border ominaisuuden käyttämisestä yhden pikselin leveän ja mustan reunuksen luomiseen:

Tälle kappaleelle on määritetty luokka esimerkki-1.

Tässä esimerkissä käytimme myös ominaisuutta CSS-täyte, tai pehmuste. Tämä ominaisuus määrittää sisennyksen määrän tekstistä viivaan (elementin reunaan).

Katsotaanpa toista yksinkertaista esimerkkiä asian ymmärtämiseksi. Luodaan kehys, jonka leveys on kolme pikseliä punaisena ja ilman pehmuste (CSS-ominaisuus pehmuste).

Tälle kappaleelle on annettu luokka esimerkki-2.

Kuten näemme, ilman pehmustetta tekstikehys näyttää sarvimaiselta.

Kuinka tehdä kuvakehys CSS:ssä

Kuvien kehykset asetetaan samalla tavalla border-ominaisuuden avulla. Tehdään kehys Vihreä väri Kuvan paksuus 4 pikseliä.

Esimerkki-kuva ( reunus: 4px tasainen vihreä; )

Näin tämä koodi toimii:

Kuinka pyöristää kehyksen kulmat CSS:ssä

Reunuksen kulmien pyöristäminen CSS:ssä tehdään border-radius-ominaisuuden avulla. Tämä ominaisuus esiteltiin CSS3:ssa ja toimii kaikissa nykyaikaisissa selaimissa.

Raja-säde-ominaisuuden arvo voi olla yhdestä neljään. Jos arvo on yksi, se asettaa pyöristysasteen kaikille kulmille. Otetaan esimerkki siitä, kuinka tämä ominaisuus toimii yhdellä arvolla.

Esimerkki 3 (reunus: 1px tasainen musta; reunuksen säde: 15px; täyte: 10px; )

Näin se toimii:

border-radius -ominaisuus: 15px.>

Jos lohkolla ei ole reunaa, on reunan leveys: 0; , täytetty alue pyöristetään taustaväri(taustaväriominaisuus). Tässä on esimerkki:

Esimerkki-4 ( reunuksen leveys: 0; // vaikka tämä arvo on oletuksena 0 taustaväri: #DDD; reunuksen säde: 15 kuvapistettä; täyte: 10 kuvapistettä; )

Tämä esimerkki toimii seuraavasti:

border-radius -ominaisuus: 15px.>

Kuten aiemmin kirjoitin, border-radius-ominaisuus voidaan asettaa yhdestä neljään arvoon. Alla oleva taulukko kuvaa, kuinka kukin arvoyhdistelmä toimii.

Raja-säde-ominaisuuden arvot voidaan määrittää prosentteina.

Piirretään ympyrä CSS:ssä. Ota tämä 100 x 100 pikselin neliölohko ja pyöristä se CSS kulmat sääntö raja-säde: 50 % .

Esimerkki-5 (leveys: 100 kuvapistettä; korkeus: 100 kuvapistettä; taustaväri: #F00; reunan säde: 50 %; )

Tämä esimerkki toimii seuraavasti:

Tämä kattaa aiheen "kehykset CSS:ssä" kokonaan. Onnea CSS:n oppimiseen!