Коришћење псеудо елемената
Можете поставити псеудо елемент тако да буде или иза елемента, и већи, правећи ефекат обруба са сопственом позадином, или мањи и унутра (али припазите да се садржај позиционира на врху).
Елемент којем је потребно више ивица треба да има своју границу и релативно позиционирање.
.borders ( position: relative; border: 5px solid #f00; )
Секундарна ивица се додаје псеудо елементом. Поставља се са апсолутним позиционирањем и уметањем са горњим / левим / доњим / десним вредностима. Ово ће такође имати обруб и задржаће се испод садржаја (задржавајући, на пример, могућност избора текста и кликавост веза) давањем негативне вредности з-индекса. Пажљиво са негативним з-индексом, ако је ово још један елемент са сопственом бојом позадине, ово можда неће успети.
.borders:before ( content: " "; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 5px solid #ffea00; )
Погледајте оловку гбгРкЗ Цхриса Цоииера (@цхрисцоииер) на ЦодеПен.
Можете да направите и трећу границу користећи :after
псеудо класу. Имајте на уму да Фирефок 3 (пре 3.6) ово зајебава подржавајући :after
и :before
, али не дозвољавајући им да буду апсолутно позиционирани (тако да изгледа чудно).
Коришћење контура
Иако је мало ограниченији од обруба (обилази читав елемент без обзира на све), обрис је додатна слободна ивица.
.borders ( border: 5px solid blue; outline: 5px solid red; )
Користећи бок-схадов
Можете користити бок-схадов да бисте направили ефекат обруба тако што ћете сенку померити и имати 0 замућења. Плус, одвајањем вредности зарезом можете да имате онолико „граница“ колико желите:
.blur ( box-shadow: 0 0 0 10px hsl(0, 0%, 80%), 0 0 0 15px hsl(0, 0%, 90%); )
Погледајте оловку кбгреКс Цхриса Цоииера (@цхрисцоииер) на ЦодеПен-у.
Коришћење исечене позадине
Можете да зауставите позадину елемента пре облога. На тај начин нормална граница елемената може на неки начин изгледати као двострука граница.
.borders ( border: solid 1px #f06d06; padding: 5px; background-clip: content-box; /* support: IE9+ */ background-color: #ccc; )
На улазу:
Погледајте ефекат Доубле Доубле бордер на Цхрис Цоииер (@цхрисцоииер) на ЦодеПен-у.