Edellisellä oppitunnilla opimme asettamaan reunuksen elementille. Tarkastelimme myös ominaisuuksia, kuten border-color ja border-style , joilla voit mukauttaa reunuksen väriä ja tyyliä. Kaikki kehyksemme tulivat kuitenkin suorissa kulmissa. Nyt kerromme sinulle, kuinka tehdä pyöristetyt kulmat CSS:ssä reunuksille.
Kulmien pyöristäminen: CSS3 border-radius -ominaisuus
CSS:n kulmien pyöristäminen voidaan tehdä mille tahansa HTML-sivun elementille. Tätä varten sinun on käytettävä border-radius-ominaisuutta sille sopivalla arvolla. Useimmiten arvo määritetään pikseleinä, mutta myös muita yksiköitä voidaan käyttää, kuten em tai prosentti (jälkimmäisessä tapauksessa laskenta tapahtuu suhteessa lohkon leveyteen).
Vaikutus tästä omaisuudesta on havaittavissa vain, jos tyyliteltävällä elementillä on värillinen tausta ja/tai reunus. Esimerkiksi:
BorderElement ( taustaväri: #EEDDFF; reunus: 6px kiinteä #7922CC; reunan säde: 25px; )
Yllä kuvattu tyyli antaa elementille seuraavan tuloksen
Voit myös tehdä pyöristetyt reunat vain elementin ylä- tai alakulmaan tai antaa kullekin kulman eri pyöristyssäteen - paljon tilaa mielikuvitukselle! Esimerkki:
BorderElement ( taustaväri: #EEDDFF; reunus: 6px kiinteä #7922CC; reunuksen säde: 25px; ) .borderElement1 ( taustaväri: #FFE8DB; reunus: 6px kiinteä #FF5A00; reunan säde: 15px 100px 15px; 100) 
Mutta siinä ei vielä kaikki: yksinkertaisten pyöreiden kulmien sijaan voit määrittää elliptisen pyöristyksen. Tätä varten sinun on määritettävä kaksi kauttaviivalla erotettua arvoa (ellipsin vaaka- ja pystysuoralle puoliakselille). Otetaan esimerkki 150×450 pikselin lohkosta:
BorderElement ( taustaväri: #EEDDFF; reunus: 6px kiinteä #7922CC; reunan säde: 280px/100px; ) 
Voit sekoittaa arvoja (eli käyttää sekä tavallista että elliptistä pyöristettyä samaan tyyliin), ja voit myös lisätä jokaiseen kulmaan henkilökohtaisen tyylin sopivilla ominaisuuksilla:
- border-top-left-radius - vasempaan yläkulmaan;
- border-top-right-radius - oikealle yläkulmalle;
- border-bottom-left-radius - vasempaan alakulmaan;
- border-bottom-right-radius - oikeaan alakulmaan.
Kulmien pyöristyksen periaate
Alla oleva kuva näyttää, kuinka kulmien pyöristys lasketaan CSS:ssä. Joten jos kulmalle on määritetty yksi arvo - esimerkiksi 20px - tämä tarkoittaa, että pyöristys tapahtuu ympyrää, jonka säde on 20 pikseliä. Jos kaksi arvoa on erotettu vinoviivalla, esimerkiksi 30px/20px , kulmat pyöristetään ellipsin mukaan. Ensimmäinen arvo on tässä tapauksessa ellipsin vaakasuuntaisen puoliakselin pituus - 30 pikseliä ja toinen arvo on pystysuoran puoliakselin pituus - 20 kuvapistettä:
Kaikki tukevat CSS-raja-säde-ominaisuutta modernit versiot selaimet.
). Tämä tehdään käyttämällä CSS border-radius -ominaisuutta. Tässä artikkelissa tarkastellaan kaikkia eri vaihtoehtoja.
CSS:n raja-säteen syntaksi on:
rajan säde : [ file_arvo];
Kulmien pyöristäminen HTML:ssä CSS:n avulla
Katsotaanpa esimerkkejä kulmien pyöristämisestä CSS:n avulla. Esimerkiksi
В этом случае все 4 края элемента будут скруглены по 30px.
Значение скругления означает то, какой радиус окружности должен быть в уголке.
Можно скруглять каждый угол с разными радиусами. Для этого нужно написать
border-radius : 10px 7px 0px 0px ;
Последовательность этих цифр следующая:
- Верхний левый угол (в примере это 10px)
- Верхний правый угол (в примере это 7px)
- Нижний правый угол (в примере это 0px)
- Нижний левый угол (в примере это 0px)
Например
Результат:
Чтобы не запоминать какое значение за каким идет можно писать в CSS в отдельности каждый угол
border-top-left-radius : 10px ; // верхний левый угол border-top-right-radius : 7px ; // верхний правый угол border-bottom-right-radius : 0px ; // нижний правый угол border-bottom-left-radius : 0px ; // нижний левый угол
Помимо этого, можно также изменять и радиус для каждого угла в отдельности для горизонтальной и вертикальной плоскостей.
Задание второго радиуса нужно задавать через слэш "/" в случае border-radius или вторым значением рядом в случае прямого указания каждого угла радиуса
border-radius : 5px 5px 5px 5px / 10px 10px 10px 10px ; или можно задать так: border-top-left-radius :5px 10px ; // верхний левый угол border-top-right-radius :5px 10px ; // верхний правый угол border-bottom-right-radius :5px 10px ; // нижний правый угол border-bottom-left-radius :5px 10px ; // нижний левый угол
Первый параметр отвечает за горизонтальный радиус, второй за вертикальный.
Например, с помощью этих свойств можно сделать эллипс:
Результат:
ПримечаниеЗначения 100px 100px 100px 100px / 200px 200px 200px 200px можно было бы написать еще компактнее:
border-radius : 100px / 200px ;
Изменяя параметры каждого из углов, можно сделать различные интересные скругленные элементы. Например, можно сделать круг, эллипс, каплю, камень, яйцо и т.п.
Задание толщины, цвета и типа линии при скруглении
Помимо значений закруглений можно также задавать толщину, цвет и тип линии скругления. Делаются все эти три параметра через свойство border :
border : [толщина ] [тип_линии ] [цвет ];
Например:
border : 1px solid #00ff00 ;
- Толщина - задается чаще всего в пикселях
- Тип линии
может принимать значения:
- solid (сплошной)
- dashed (пунктирный)
- dotted (ряд точек)
- groove (линия бороздка)
- inset (вдавленная линия)
- outset (выдавленная линия)
- Цвет можно задать либо в формате RGB, либо просто названием (см. коды и названия html цветов)
Приведем пример
Таким образом можно красиво оформлять различные рамки для объявлений, замечаний на сайте.
Свечение для скругления
Помимо задания толщины, цвета и типа линии можно также задавать и свечении рамки. Делается это с помощью свойства box-shadow
box-shadow : 0px 0px 4px 2px #a0b ;
Первые два параметра (0px 0px) задают сдвиг тени по горизонтали и вертикали соответственно. Следующие два параметра (4px 2px) задают силу свечения вокруг. Чтобы получилось красиво нужно делать одну цифру больше другой, а вообще надо экспериментировать. Последний параметр - цвет (#a0b).
Например
Результат:
Мы приводили всегда в качестве примеров тег
Браузеры
Старые браузеры могут не поддерживать свойство border-radius
. Так, IE ниже 9 версии, Firefox ниже 4 не отображают закругления. Необходимо прописывать вендорные префиксы CSS :
-webkit-border-radius :5px ; -moz-border-radius :5px ; border-radius :5px ;
Свойство border radius CSS используется для закругления углов элемента. Это сокращенная версия свойств: border-top-left-radius , border-top-right-radius , border-bottom-right-radius и border-bottom-left-radius .
Оно может принимать от одного до четырех значений или восемь значений, разделенных косой чертой «/» , с одним — четырьмя значениями с каждой стороны от косой черты.
- Если косая черта не указана, то свойство может принимать одно, два, три или четыре значения.
border-radius: [значение радиуса] [значение радиуса]? [значение радиуса]? [значение радиуса]?; // "?" указывать данное значение необязательно
- Если задано четыре значения, то они определяют радиусы каждого из четырех углов. То есть первое значение будет указывать x и y радиуса верхнего левого угла, таким образом, это будет круговая кривая. Второе значение задает радиусы для верхнего правого угла, третье — определяет радиусы нижнего правого угла, а четвертое — нижнего левого;
- Если задано три значения, первое устанавливает радиус верхнего левого угла, второе — радиус верхнего правого и левого нижнего углов, а третье — нижнего правого угла;
- Если задано два значения CSS table border radius , первое определяет радиусы левого верхнего и правого нижнего углов, а второе — радиусы верхнего правого и нижнего левого углов;
- Если задано одно значение, то оно задает одинаковые радиусы четырех углов.
Например:
border-radius: 1em 3em 2em;
эквивалентно:
border-top-left-radius: 1em; border-top-right-radius: 3em; border-bottom-right-radius: 2em; border-bottom-left-radius: 3em;
В каждом из перечисленных выше случаев, когда не используется косая черта, четыре угла элемента будут закруглены, а их кривизна будет идеальным кругом:
Два одинаковых радиуса для каждого угла дают круговую кривую. Каждый угол в этом примере имеет горизонтальный и вертикальный радиус 50 пикселей.
- Если косая черта указана, то свойство может принимать до восьми значений — от одного до четырех значений с каждой стороны от косой черты.
Значения, указанные перед косой чертой, задают горизонтальный радиус углов. Значения, указанные после косой черты, задают вертикальный радиус соответствующих углов.
Например:
border-radius: 2em 1em 4em / 0.5em 3em;
эквивалентно:
border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em;
В этом случае применения border radius CSS углы элемента будут закруглены, и их кривизна будет эллиптической:
Два неодинаковых радиуса для каждого угла дают эллиптическую кривизну. Каждый угол в этом примере имеет горизонтальный радиус 100 пикселей и вертикальный радиус 50 пикселей.
Общая информация и примечания
Если элемент использует фоновый цвет или изображение, фон также будет обрезаться указанным радиусом границы:
Фоновое изображение элемента обрезается в соответствии с указанным радиусом границы.
Но иногда цвет фона элемента может «просачиваться » за пределы границы, когда она закруглена. Чтобы исправить это, можно использовать свойство background-clip и установить для него значение padding-box .
Element { border-radius: 30px; background-clip: padding-box; }
Если у элемента есть границы изображения, то они не подрезается кривой закругленных углов.
Содержимое элемента может выходить за его границы в углах, которые были закруглены, если для элемента не установлено значение отступа, достаточное, чтобы сместить содержимое внутрь:
Содержимое элемента может выходить за закругленную границу, если для элемента не заданы отступы.
В этом примере moz border radius CSS добавлены отступы, чтобы содержимое не выходило за закругленные углы границы. Обратите внимание, что сама граница не отображается, но фон все равно будет иметь закругленные углы.
Element { background: black; color: white; border-radius: 1em; padding: 1em; }
Кроме этого область вне кривой границы не принимает pointer events , связанные с данным элементом.
Также кривые углов не должны пересекаться: когда сумма радиусов любых двух соседних границ превышает размер блока, браузеры должны пропорционально уменьшить используемые значения всех радиусов границ, чтобы ни один из них не перекрывался.
Процентные значения идеально подходят для создания круглых или эллиптических форм. Использование border radius CSS: 50% дает полностью круглую форму элемента, у которого высота и ширина равны:
Элемент с одинаковой высотой, шириной и значением радиуса границы 50%.
Если высота и ширина элемента не равны, мы получим эллиптическую форму:
Элемент с радиусом границы 50%, высота и ширина которого не равны.
Официальный синтаксис
Синтаксис:
border-radius: [<длина> | <проценты>] {1,4} {1,4}]?
Начальное значение: 0 0 0 0, оно задает начальное значения каждого из отдельных свойств.
Применяется: ко всем элементам. Но браузеры не обязательно должны применять его к элементам table и inline-table , когда для свойства border-collapse задано значение collapse . На данный момент поведение внутренних элементов таблицы не определено.
Анимируется: Каждое из полных свойств анимируется, как два значения длины, процентных значения или значения calc() . Когда оба значения являются длинами, они интерполируются как длины. Когда оба значения являются процентами, они интерполируются в процентах. Иначе оба значения преобразуются свойством calc() .
Значения
Неофициальный синтаксис webkit border radius CSS :
border-radius: [значение радиуса] [значение радиуса]? [значение радиуса]? [значение радиуса]?;
border-radius: [верхний левый горизонтальный радиус] [верхний правый горизонтальный радиус]? [нижний правый горизонтальный радиус]? [нижний левый горизонтальный радиус]? / [верхний левый вертикальный радиус] [верхний правый вертикальный радиус]? [нижний правый вертикальный радиус]? [нижний левый вертикальный радиус]?
В обоих случаях вопросительный знак (?) означает, что значение является необязательным. Если значение опущено, браузер определяет его, как описано выше.
Каждый радиус может задаваться процентами или значением длины. Процентное соотношение для горизонтального радиуса относится к ширине блока, тогда как процентное соотношение для вертикального радиуса относится к высоте блока. Отрицательные значения не допускаются.
border-radius: 50%; border-radius: 30px 20px 40px; border-radius: 1em 2em; border-radius: 3em / 2em 4em; border-radius: 1em 2em 1em 3em / 2em 3em;
Демо-версия
Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.
Краткая информация
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| Группирует значения. | [ crop || cross ] | |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через косую черту (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчёт ведётся относительно ширины блока.
В случае задания двух параметров через косую черту, то первый параметр задаёт радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рис. 1 показана разница между обычным скруглённым уголком и эллиптическим уголком.
Рис. 1. Радиус скругления для создания разных типов уголков
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
div { background: #e4efc7; border: 1px solid #333; padding: 10px; border-radius: 0 ; }
Пример
Tulos tämä esimerkki esitetty kuvassa. 2.
Riisi. 2. Pyöristyssäteet
Objekti malli
Esine.style.borderRadius
Huom
Chrome ennen versiota 4.0, Safari ennen versiota 5.0 ja Android ennen versiota 2.1 käyttävät ominaisuutta -webkit-border-radius.
Firefox ennen versiota 4.0 käyttää ominaisuutta -moz-border-radius.
Erittely
Jokainen erittely käy läpi useita hyväksymisvaiheita.
- Suositus - W3C on hyväksynyt spesifikaation ja sitä suositellaan standardiksi.
- Ehdokassuositus ( Mahdollinen suositus ) - standardista vastaava ryhmä on tyytyväinen, että se täyttää tavoitteensa, mutta tarvitsee kehitysyhteisön apua standardin toteuttamiseen.
- Ehdotettu suositus Suositeltu suositus) - tässä vaiheessa asiakirja toimitetaan W3C:n neuvoa-antavalle toimikunnalle lopullista hyväksyntää varten.
- Työluonnos – Kypsempi versio luonnoksesta, josta on keskusteltu ja jota on muutettu yhteisön tarkistamista varten.
- Toimittajan luonnos ( Toimituksellinen luonnos) - standardin luonnosversio projektin toimittajien tekemien muutosten jälkeen.
- Luonnos ( Erittelyluonnos) - standardin ensimmäinen luonnos.
Olen varma, että olet jo perehtynyt border css -ominaisuuteen. Opitko jotain uutta, mitä et tiennyt ennen css borderista? No, et vain opi, vaan näet myös useita uusia asioita, joita et koskaan ennen tiennyt!
CSS3:lla ei voi ainoastaan luoda pyöristettyjä kulmia, vaan puhdasta CSS-koodia voidaan käyttää myös monimutkaisten muotojen luomiseen. Aiemmin voit käyttää taustakuvaa saadaksesi ulkonäön pyöristetyistä kulmista. Uusien reunusten käyttötekniikoiden ansiosta voimme tehdä tämän puhtaalla CSS-koodilla.
CSS-reunuksen käytön perusteet
Olet varmasti jo tutustunut standardiin käyttämällä reunaa ominaisuudet:
Reunus: 1px yksivärinen musta;
Yllä oleva koodi tulostaa 1 pikselin reunuksen, joka on musta. Helppoa ja yksinkertaista. Voit myös laajentaa syntaksia hieman:
Reunuksen leveys: paksu; reuna-tyyli: kiinteä; reunan väri: musta;
Lisäksi voit käyttää rajan leveysominaisuuden arvoja, kolme avainsanoja: ohut, keskikokoinen, paksu.
Mutta laajennetun syntaksin käyttö ei ole aina käytännöllistä. Katsotaanpa esimerkkiä, kun sinun on vaihdettava lohkokehyksen väriä, kun hiirtä liikutetaan. Tässä tapauksessa lyhennetyn syntaksin käyttö on paljon yksinkertaisempaa:
Laatikko ( reunus: 1px tasainen punainen; ) .box:hover ( reunus: 1px kiinteä vihreä; )
Tyylikkäämpi ja yksinkertaisempi tapa tehdä tämä on:
Laatikko ( reunus: 1px tasainen punainen; ) .box:hover ( reunuksen väri: vihreä; )
Kuten näet, edistynyt tekniikka on hyödyllinen myös silloin, kun muutamme vain joitain ominaisuuksia: leveyttä, tyyliä, väriä ja muita.
Raja-säde
Raja-säde- Tämä on CSS3:n "kultainen" ominaisuus - ensimmäinen, yleisin ominaisuus, josta tuli käytännöllinen ja hyödyllinen. IE8:aa ja alla olevia versioita lukuun ottamatta kaikki selaimet näyttävät pyöristetyt kulmat tätä käyttämällä.
Webkitille ja Mozillalle on kuitenkin käytettävä erityisiä etuliitteitä, jotta tyyli olisi oikea.
Webkit-border-radius: 10px; -moz-border-radius: 10px; reunan säde: 10px;
Nykyään voimme poistaa erityiset etuliitteet ja käyttää vakiomuotoinen raja-säde.
Toinen etu on, että voimme käyttää erityisiä arvoja lohkon jokaiselle puolelle:
Reunus-ylävasen-säde: 20px; raja-ylä-oikea-säde: 0; reunus-alha-oikea-säde: 30px; raja-ala-vasen-säde: 0;
Yllä olevassa koodissa reunus-yläoikean-säteen ja reuna-alha-vasen-säteen asettaminen "nulliksi" voi saada hämmästyttäviä muotoja. Vaikka elementti voi periä joitain ominaisuuksia, jotka on nollattava.
Kuten marginaali ja täyte, voimme pakata syntaksin:
/* ylhäällä vasen, ylhäällä oikea, alhaalla oikea, alhaalla vasen */ border-radius: 20px 0 30px 0;
Esimerkkinä border-radius-ominaisuuden käytöstä näytän sinulle "sitruunan", jota suunnittelijat käyttävät usein verkkosivustojen suunnittelussa:
Sitruuna (leveys: 200px; korkeus: 200px; tausta: #F5F240; reunus: 1px kiinteä #F0D900; reunan säde: 10px 150px 30px 150px;)
Mennään perusasioiden pidemmälle
Monilla suunnittelijoilla on kaikki alan tiedot css-ominaisuudet raja, siihen se loppuu. Mutta on joitain muita hienoja asioita, joiden avulla voit luoda upeita asioita!
Monimutkaiset css-reunusrakenteet
On olemassa monia tekniikoita mallien luomiseen käyttämällä monimutkaiset rakenteet rajaa. Katsotaanpa esimerkiksi seuraavaa...
Border-tyyli
Käytämme aina tunnetuimpia ominaisuuksia kiinteinä, katkoviivoina ja pisteinä. Mutta on olemassa pari muuta reunatyylistä ominaisuutta: ura ja harja.
Reunus: 20 kuvapisteen ura #e3e3e3;
Tai laajennetussa syntaksissa:
Reunuksen väri: #e3e3e3; reunan leveys: 20 pikseliä; reuna-tyyli: ura;
Vaikka nämä ominaisuudet ovat hyödyllisiä, ne eivät ole perusta monimutkaisten kehysten luomiselle.
Outline
Suosituin tekniikka kaksoisreunuksen luomiseen on outline-ominaisuuden käyttö.
Laatikko (reunus: 5px kiinteä #292929; ääriviivat: 5px kiinteä #e3e3e3; )
Tämä menetelmä toimii hyvin, vaikka se rajoittaa meidät vain kahteen kehykseen. Joskus täytyy luoda gradienttireunus, joka koostuu useista kerroksista... miten sitten?
Pseudoelementtejä
Kun ääriviivatekniikka ei riitä, vaihtoehtoisia keinoja on käyttää pseudoelementtejä:ennen ja:jälkeen. Millä voi lisätä lisäkehyksiä elementtiin:
Laatikko ( leveys: 200px; korkeus: 200px; tausta: #e3e3e3; sijainti: suhteellinen; reunus: 10px tasainen vihreä; ) /* Luo kaksi laatikkoa, joiden leveys on sama kuin säilö */ .box:after, .box:before ( sisältö: ""; sijainti: absoluuttinen: 0
Se ei näytä kovin tyylikkäältä, mutta vähintään, se toimii. On hieman vaikeaa hahmottaa värien järjestystä kehyksissä... mutta voit ymmärtää.
Box-Shadow
Mielenkiintoinen "lasten tapa" luoda samanlainen vaikutus on käyttää CSS3 box-shadow -ominaisuutta:
Laatikko (reunus: 5px tasainen punainen; laatikon varjo: 0 0 0 5px vihreä, 0 0 0 10px keltainen, 0 0 0 15px oranssi;)
Tässä tapauksessa olimme älykkäämpiä ja käytimme erityistä laatikkovarjoominaisuutta. Muuttamalla x, y, sumeusparametrit nollaan, voimme käyttää eri värejä useiden kehysten luomiseen.
Mutta on ongelma, vanhemmissa selaimissa, jotka eivät ymmärrä box-shadow -ominaisuutta, vain yksi punainen kehys, jonka koko on 5px, näkyy.
"Muistaa! Sivuston ulkoasun tulee näyttää selainväliseltä, eli samalta kaikissa selaimissa. Mukaan lukien vanhemmat versiot."
Kulmien vaihtaminen
Käytetyn lisäksi yksinkertainen merkitys border-radius, voimme määrittää kaksi erillistä - erottamalla ne / -osoittelemme vaaka- ja pystysäteen.
Esimerkiksi:
Reunuksen säde: 50px / 100px; /* vaakasäde, pystysäde */
... tämä vastaa:
Reunus-ylävasen-säde: 50px 100px; reunus-ylä-oikea-säde: 50px 100px; reunus-ala-oikea-säde: 50px 100px; reunus-ala-vasen-säde: 50px 100px;
Tämä tekniikka sopii luomiseen ainutlaatuisia muotoja lohkot. Voit luoda kääreeseen paperitehosteen esimerkiksi seuraavasti:
Laatikko (leveys: 200px; korkeus: 200px; tausta: #666; reunus-ylä-vasen-säde: 15em 1em; reunus-alha-oikea-säde: 15em 1em; )
CSS-lomakkeet reunalla
Tämä tekniikka näyttää, kuinka voit luoda CSS-lomakkeita, kun käytät elementtejä nolla mitat korkeus ja leveys. Yllättynyt? Katsotaanpa esimerkkiä...
Seuraavissa esimerkeissä käytämme seuraavia merkintöjä:
...ja seuraava perustyyli:
Laatikko (leveys: 200px; korkeus: 200px; tausta: musta; )
Useimmat yleinen esimerkki CSS:n avulla muodot - luovat virtaavan nuolen. Tämän nuolen salaisuus piilee siinä rajan luominen eri väreillä kummallekin puolelle. Aseta sitten leveys- ja korkeusmääritteiksi 0.
Tehdään tehtäväksi div-lohko nuoliluokka:
Nuoli (leveys: 0; korkeus: 0; reunus yläreunassa: 100px tasainen punainen; reunus oikea: 100px tasainen vihreä; reuna-ala: 100px tasainen sininen; reunus vasen: 100px tasainen keltainen; )
Havainnollistamiseen käytämme ensin laajennettua syntaksia. Seuraavaksi voimme poistaa ylimääräisen koodin käyttämällä lyhennettyä syntaksia:
Nuoli (leveys: 0; korkeus: 0; reunus: 100px kiinteä; reunuksen väri: punainen vihreä sininen keltainen;)
Mielenkiintoista, eikö? Nyt asennamme läpinäkyviä värejä kaikilta puolilta paitsi sinistä puolta.
Nuoli (leveys: 0; korkeus: 0; reunus: 100 pikseliä yhtenäinen; reuna-ala-väri: sininen; )
Siitä tuli hienoa! Mutta tämä on ristiriidassa semanttinen asettelu, luo .arrow div vain lisätäksesi nuolen sivulle. Tätä tarkoitusta varten voimme käyttää pseudoelementtejä, mitä teemme nyt.
Luo puhekupla
Puhekuplan luomiseksi tarvitsemme pienen palan puhdas CSS koodi ja yksi div-lohko.
Puhekupla ( sijainti: suhteellinen; taustaväri: #292929; leveys: 200 pikseliä; korkeus: 150 pikseliä; rivin korkeus: 150 kuvapistettä; /* pystysuunnassa keskellä */ väri: valkoinen; tekstin tasaus: keskellä; )
Puhekupla:jälkeen ( sisältö: ""; )
Tässä vaiheessa luomme aiemmin tekemämme nuolen, lisäämme sen elementtiin ja jäljellä on vain sijoittaa se:
Puhekupla: jälkeen (sisältö: ""; sijainti: absoluuttinen; leveys: 0; korkeus: 0; reuna: 10px kiinteä; reunuksen väri: punainen vihreä sininen keltainen; )
Jos haluamme nuolen osoittavan alaspäin, meidän on asetettava kaikki reunat läpinäkyviksi paitsi yläreuna.
Puhekupla:jälkeen (sisältö: ""; sijainti: absoluuttinen; leveys: 0; korkeus: 0; reunus: 10px kiinteä; reunuksen yläväri: punainen; )
Kun luomme tämän CSS-muoto, emme voi erikseen ilmoittaa nuolen kokoa. Sen sijaan voimme asettaa border-width -ominaisuuden, joka määrittää nuolelle koon. Asetamme myös alareunassa olevan nuolen sijainnin keskelle. Vastaavasti tätä varten käytämme arvoja ylhäällä ja vasemmalla.
Puhekupla:jälkeen (sisältö: ""; sijainti: absoluuttinen; leveys: 0; korkeus: 0; reunus: 15px kiinteä; reunuksen yläväri: punainen; yläosa: 100%; vasen: 50%; )
Lisäksi meidän on vain annettava sille sama väri kuin lohkolle. Muista, että sijoittaessasi sinun on otettava huomioon muiden näkymättömien reunusten koko (15px). Annamme myös lohkon pyöristyksen kulmiin.
Puhekupla ( /* … muut tyylit */ reuna-säde: 10px; ) .speech-bubble:after ( sisältö: ""; sijainti: absoluuttinen; leveys: 0; korkeus: 0; reuna: 15px kiinteä; reuna-yläosa -väri: #292929: 100% margin-vasen: -15px */ )
Ei paha, vai mitä? Käyttämällä useita css luokat ja rajatemppuja, voit luoda sellaisen.
/* Puhekuplien käyttö: Käytä luokkaa .speech-bubble ja .speech-bubble-DIRECTION alla olevan kuvan mukaisesti
Bonus! Pysty keskitys lohkon sisällä
Yhden tekstirivin kohdalla voit käyttää rivinkorkeutta. Mutta jos sinulla on kaksi tai useampi riviä tekstiä... Paras ratkaisu asettaa näyttöominaisuuden taulukoksi ja sijoittaa kaiken tekstin kappaleeseen. Tältä se näyttää päällä html-merkintä:
Speech-bubble ( /* muut tyylit */ näyttö: taulukko; ) .speech-bubble p ( näyttö: taulukko-solu; pystytasaus: keskellä; )
Emme rajoita itseämme kolmioihin. CSS pystyy näyttämään erilaisia muotoja – jopa sydämiä ja biohazard-merkin.
Biohazard (leveys: 0; korkeus: 0; reuna: 60 pikseliä kiinteä; reunan säde: 50 %; reunuksen yläväri: musta; reunuksen alaosan väri: musta; reunan vasen väri: keltainen; reunus-oikea-väri väri: keltainen)
