ЦСС ивице и обриси су вредни алати за веб дизајнере који желе да додају чар сајту. Једноставни су за употребу када знате како раде и довољно су разноврсни да задовоље широк спектар потреба. Хајде да погледамо ЦСС границе да видимо одакле треба да почнете.
Која је разлика између ивице и обриса у ЦСС-у?
ЦСС обриси и ивице чине два спољна слоја модел ЦСС кутије, који се налази између ивица и маргина. Иако су ова својства слична, имају различите вредности и сврхе.
Као прво, ЦСС обриси се налазе изван граница. То значи да се могу преклапати са садржајем изван елемента на који их примените. Заједно са овим, ЦСС границе мењају димензије елемента, али обриси не.
Ако имате потешкоћа да визуализујете ивице и стилове обриса, можете користити свој алати за развој претраживача за отклањање грешака њих.
ЦСС Бордер & Оутлине Схаред Проперти Валуе
Упркос њиховим разликама, ЦСС границе и обриси деле неке од њихових вредности. Скраћеница коју користите за сваку је такође веома слична.
ЦСС Бордер & Оутлине Схортханд
Као и друга сложена ЦСС својства, и границе и обриси имају доступну стенографију. Оба ова својства деле исти формат за своје опције скраћења и изгледа овако.
граница: ширинастилбоја;
нацрт: ширинастилбоја;Ово ствара правила која изгледају овако када су у акцији. Наравно, међутим, ова скраћеница не покрива све вредности доступне за ова својства.
граница: 10пк пуна плава;
контура: 20пк пуна црвена;Ова скраћена ЦСС правила ивице и обриса резултирају танким плавим оквиром са дебелим црвеним обрисом.
Као и друга скраћена својства ЦСС-а, такође можете користити појединачна својства да бисте постигли исте резултате.
ЦСС граница-ширина и ширина контуре
Ширина ивица и обриса су опционе вредности ЦСС својстава које постављају дебљину ивица и обриса које користите. Формат за ова својства је исти.
оутлине-видтх: 20пк;
бордер-видтх: 10пк;Ивице омогућавају постављање појединачних ширина за сваку страну елемента, али обриси не. Више о томе можете прочитати у следећим одељцима.
ЦСС стил ивице и стил контуре
ЦСС границе и обриси долазе у различитим стиловима. Пуне ивице су најчешће, али можете постати креативни са начином на који користите ивице и обрисе.
Борд-стиле: чврст;
оутлине-стиле: тачкаста;На крају овог чланка можете пронаћи потпуну листу различитих ЦСС ивица и стилова обриса.
ЦСС боја-боја и боја контуре
Као и код других ЦСС својстава заснованих на бојама, ивице и обриси прихватају све ЦСС легалне боје. Ово укључује хексадецималне кодове, РГБ кодове, стенографске боје и још много тога.
боја ивице: плава;
боја контуре: #фф0000;Такође можете да користите градијенте боја када радите са ЦСС ивицама и обрисима.
Вредности својства ЦСС Бордер
Поред вредности заједничких својстава, границе и обриси такође имају јединствене вредности за истраживање. ЦСС границе имају две јединствене особине које вреди научити.
ЦСС граница-радијус
Додавање радијуса ивици елемента даје вам велику контролу над његовим обликом. Сваки угао елемента може имати другачији радијус, а ово својство се може подесити чак и када је бордер-стиле постављен на ниједан.
бордер-радиус: 20пк;Можете подесити једну вредност да бисте променили радијус свих углова.
Такође можете поделити углове у групе горе лево/доле десно и горње десно/доле лево.
бордер-радиус: 10пк 20пк;Ово олакшава креирање занимљивих облика са вашим ХТМЛ елементима.
Коначно, можете подесити да сваки угао има сопствени радијус.
бордер-радиус: 10пк 20пк 30пк 40пк;Ове вредности се примењују у смеру казаљке на сату почевши од горњег левог угла.
ЦСС својства на страни границе
За разлику од обриса, можете подесити сваку страну ивице да има јединствену вредност за многа својства. Ово омогућава да свакој страни елемента дате различиту ширину.
бордер-лефт-видтх: 10пк;
бордер-ригхт-видтх: 20пк;
бордер-топ-видтх: 30пк;
бордер-боттом-видтх: 40пк;Такође можете поставити независне ЦСС стилове ивица за сваку страну елемента.
Бордер-лефт-стиле: чврст;
бордер-ригхт-стиле: тачкаста;
бордер-топ-стиле: испрекидана;
Бордер-боттом-стиле: дупло;И можете променити боју сваке стране ако желите.
Бордер-лефт-стиле: плава;
у стилу ивице десно: #фф0000;
Бордер-топ-стиле: #00фф00;
бордер-боттом-стиле: ргб (0, 0, 255);ЦСС граничне стране раде са уобичајеном скраћеницом да би се овако комбиновале.
бордер-лефт: 10пк пуна плава;
граница десно: 20пк са тачкама #00фф00;
бордер-топ: 30пк испрекидана #фф0000;
ивица доле: 40пк дуплоргб(0, 0, 255);Вредности својства ЦСС Оутлине
Као и ЦСС границе, обриси имају своје јединствено својство; оутлине-оффсет.
ЦСС оутлине-оффсет
Додавање офсета на контуру ствара размак између њега и главног елемента. Овај помак мора бити исти за сваку страну контуре, а својство прихвата само једну вредност.
оутлине-оффсет: 10пк;Ово може бити згодан начин да искористите трећу ивицу за своје елементе која одговара вашој боји позадине.
ЦСС Бордер & Оутлине стилови
И границама и обрисима је потребан стил да би функционисали. Постоји десет доступних стилова које можете изабрати, укључујући ивице које се уопште не појављују.
Борд-стиле: чврст;
рубни стил: тачкасти;
у стилу границе: испрекидано;
рубни стил: жлеб;
Борд-стил: гребен;
у стилу границе: дупло;
Бордер-стиле: уметак;
у стилу границе: почетак;
Бордер-стиле: скривено;
Бордер-стиле: нема;Ивице деле исте стилове са обрисима, само са стилом контуре постављеним као својством.
Како користити ЦСС ивице и обрисе
Обриси и ивице су одлични алати за дизајн за креаторе веб локација. Можете да дефинишете изглед и осећај своје веб локације помоћу ових ЦСС својстава, али мораћете да будете креативни.