Граница - CSS-трикове

В borderимота е синтаксис стенография в CSS, който приема няколко стойности за теглене на линия около елемента който тя се прилага.

.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.

Chrome	Сафари	Firefox	Опера	IE	Android	iOS
Всякакви	Всякакви	Всякакви	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.

• border-collapse: Specifies the spacing between borders on the
• border-image: Allows the use of an image to draw the border instead of a solid color.
• border-radius: Provides control for rounded corners.

More Information

• CSS Backgrounds and Borders Module Level 3 Specification
• Understanding border-image
• A Tale of Border Gradients

---




element. #####