Граница - ЦСС-трикови

Anonim

borderИмовина је скраћеница синтакса у ЦСС-у да прихвата више вредности за цртање линије око елемента се примењује у.

.box ( border: 3px solid red; height: 200px; width: 200px; )

Вредности

borderИмовине прихвата један или више од следећих вредности у комбинацији:

border: || || 
  • border-width: Одређује дебљину обруба.
    • : Нумеричка вредност мери у px, em, rem, vhи vwјединица.
    • thin: Еквивалент од 1px
    • medium: Еквивалент од 3px
    • thick: Еквивалент од 5px
  • border-style: Одређује врсту линије повучене око елемента, укључујући:
    • solid: Пуна, непрекидна линија.
    • none (подразумевано): Није повучена линија.
    • hidden: Повучена је линија, али није видљива. ово може бити корисно за додавање мало додатне ширине елементу без приказивања обруба.
    • dashed: Линија која се састоји од цртица.
    • dotted: Линија која се састоји од тачака.
    • double: Око елемента су нацртане две линије.
    • groove: Додаје стопу на основу вредности боје на начин да чини да елемент изгледа утиснут у документ.
    • ridge: Слично groove, али преокреће вредности боја на начин да чини да елемент изгледа подигнут.
    • inset: Додаје раздвојени тон линији због које елемент изгледа помало депресивно.
    • outset: Слично inset, али преокреће боје на начин да елемент изгледа лагано подигнут.
  • color: Одређује боју обруба и прихвата ,, , , , , currentcolor and

Phew, that’s a lot of values for one little ol’ property! Here’s a demo that illustrates the differences between all of those style values:

See the Pen CSS border by Geoff Graham (@geoffgraham) on CodePen.

Browser Support

You can count on excellent support for the border property across all browsers.

Хром Сафари Фирефок Опера ИЕ Андроид иОС
Било који Било који Било који 3.5+ 4+ Било који Било који

Related Properties

What we covered here is specific to the border property, but there are other properties that provide even more options for styling borders.