Главная » Языки программирования

Пример рамки в css

Содержание
  1. border
  2. Пример
  3. 43 CSS Borders
  4. Related Articles
  5. Author
  6. Links
  7. Made with
  8. About a code
  9. Animated Border Image
  10. Author
  11. Links
  12. Made with
  13. About a code
  14. Partial Gradient Border
  15. Author
  16. Links
  17. Made with
  18. About a code
  19. Gradient Border with Rounded Corners
  20. Author
  21. Links
  22. Made with
  23. About a code
  24. Background Border
  25. Author
  26. Links
  27. Made with
  28. About a code
  29. Patterned Borders
  30. Author
  31. Links
  32. Made with
  33. About a code
  34. Custom Dashed Border
  35. Author
  36. Links
  37. Made with
  38. About a code
  39. Colorful Border
  40. Author
  41. Links
  42. Made with
  43. About a code
  44. Gradient Border Effect
  45. Author
  46. Links
  47. Made with
  48. About a code
  49. Gradient Border + Transparent Background
  50. Author
  51. Links
  52. Made with
  53. About a code
  54. Border Linear-Gradient + Border-Radius
  55. Author
  56. Links
  57. Made with
  58. About a code
  59. Corner-only Border
  60. Author
  61. Links
  62. Made with
  63. About a code
  64. 8bit border-image
  65. Author
  66. Links
  67. Made with
  68. About a code
  69. 8-bit Pixel Border
  70. Author
  71. Links
  72. Made with
  73. About a code
  74. Avatar Border Effect. 15 Declarations, 1 Element, No Pseudos
  75. Author
  76. Links
  77. Made with
  78. About a code
  79. Use SVG for border-image
  80. Author
  81. Links
  82. Made with
  83. About a code
  84. CSS Gradient Borders
  85. Author
  86. Links
  87. Made with
  88. About a code
  89. Borders & Gradients
  90. Author
  91. Links
  92. Made with
  93. About a code
  94. Multiple Border-Radius Values
  95. Author
  96. Links
  97. Made with
  98. About a code
  99. CSS Candy Stripe Border Using Clip-Path
  100. Author
  101. Links
  102. Made with
  103. About a code
  104. Offset and XOR Frame: Lively
  105. Author
  106. Links
  107. Made with
  108. About a code
  109. Full Screen Vintage Frame with Multiple Borders
  110. Author
  111. Links
  112. Made with
  113. About a code
  114. Gradient Border
  115. Author
  116. Links
  117. Made with
  118. About a code
  119. Pure CSS Circular Border Patterns
  120. Author
  121. Links
  122. Made with
  123. About a code
  124. Fitted Border Image the Easy Way
  125. Author
  126. Links
  127. Made with
  128. About a code
  129. Map-Inspired Border
  130. Author
  131. Links
  132. Made with
  133. About a code
  134. Blurred Border
  135. Author
  136. Links
  137. Made with
  138. About the code
  139. Magic Borders
  140. Author
  141. Links
  142. Made with
  143. About the code
  144. Interactive Button Border
  145. Author
  146. Как создать рамку вокруг элемента. CSS-свойство border
  147. Значения свойства border
  148. Border-width
  149. Border-style
  150. Border-color
  151. Наследование
  152. Для чего использовать свойство border
  153. Нюансы
  154. Чем заменить свойство
  155. Материалы по теме
Читайте также:  Как открыть ярлык python

border

Свойство border отвечает за отрисовку видимой границы блока. Часто видимую границу блока называют рамкой.

Само свойство border является шорткатом (короткой записью) и объединяет в себе значение для нескольких полных свойств:

Пример

Скопировать ссылку «Пример» Скопировано

Украсим текстовую карточку цветной сплошной рамкой.

   
Повседневная практика показывает, .
   div class="element"> p>Повседневная практика показывает, . p> div>

Зададим рамку толщиной 5 пикселей, сплошную, цвета #ED6742:

 .element  border: 5px solid #ed6742;> .element  border: 5px solid #ed6742; >

Внешний вид наложения рамок

🛠 Ещё немного про треугольники. А точнее, стрелки. Их тоже можно создать при помощи border , но тут понадобится подключить свойство transform , чтобы повернуть элемент с рамками на 45 градусов в нужную сторону:

 div class="arrows"> div class="arrow _prev">div> div class="arrow _next">div> div>      
 .arrows  max-width: 1200px; height: 250px; margin: 0 auto; background-color: #f1f1f1;> .arrow  /* Рисуем квадрат */ width: 50px; height: 50px; /* Задаём левую рамку */ border-left: 5px solid #ff0001; /* Задаём нижнюю рамку */ border-bottom: 5px solid #ff0001;> .arrow._prev  /* Поворачиваем квадрат нижним левым углом влево */ transform: rotate(45deg);> .arrow._next  /* Поворачиваем квадрат нижним левым углом вправо */ transform: rotate( -135deg );> .arrows  max-width: 1200px; height: 250px; margin: 0 auto; background-color: #f1f1f1; > .arrow  /* Рисуем квадрат */ width: 50px; height: 50px; /* Задаём левую рамку */ border-left: 5px solid #ff0001; /* Задаём нижнюю рамку */ border-bottom: 5px solid #ff0001; > .arrow._prev  /* Поворачиваем квадрат нижним левым углом влево */ transform: rotate(45deg); > .arrow._next  /* Поворачиваем квадрат нижним левым углом вправо */ transform: rotate( -135deg ); >

Чем не стрелки для слайдера? 🤗

🛠 Часто встречающийся дизайнерский приём — появление рамки вокруг элемента при наведении на него курсора мыши.

Если просто добавлять рамку по селектору :hover , то элемент будет дёргаться. Причина в том, что размер элемента увеличивается на ширину рамки. Чтобы подобных подёргиваний не происходило, изначально задайте рамку нужной толщины, но установите ей прозрачный цвет ( transparent ). А по наведению курсора просто меняйте цвет на нужный. Profit! Вы прекрасны 😄

Источник

43 CSS Borders

Collection of hand-picked free HTML and CSS border code examples from Codepen, GitHub and other resources. Update of May 2021 collection. 15 new items.

Author

Made with

About a code

Animated Border Image

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Partial Gradient Border

Author

Made with

About a code

Partial Gradient Border

Partial gradient border surrounding a circle image, which is done with a CSS conic gradient and a radial gradient mask.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Gradient Border with Rounded Corners

Author

Made with

About a code

Gradient Border with Rounded Corners

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Background Border

Author

Made with

About a code

Background Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Patterned Borders

Author

Made with

About a code

Patterned Borders

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Custom Dashed Border

Author

Made with

About a code

Custom Dashed Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Colorful Border

Author

Made with

About a code

Colorful Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Gradient Border Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Gradient Border + Transparent Background

Author

Made with

About a code

Gradient Border + Transparent Background

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Border Linear-Gradient + Border-Radius

Author

Made with

About a code

Border Linear-Gradient + Border-Radius

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Corner-only Border

Author

Made with

About a code

Corner-only Border

Corner-only border (allows for corner rounding & gradient border).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: 8bit border-image

Author

Made with

About a code

8bit border-image

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: 8-bit Pixel Border

Author

Made with

About a code

8-bit Pixel Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Avatar Border Effect. 15 Declarations, 1 Element, No Pseudos

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Use SVG for border-image

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CSS Gradient Borders

Author

Made with

About a code

CSS Gradient Borders

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Borders & Gradients

Author

Made with

About a code

Borders & Gradients

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Multiple Border-Radius Values

Author

Made with

About a code

Multiple Border-Radius Values

You probably knew that you can set the border-radius of an element to 4 values, and using shorthand, it goes clock-wise from top, right, bottom, left. But did you know you can actually set up to 8 values if you separate them? Each corner can have 2 values as you can see in this example.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CSS Candy Stripe Border Using Clip-Path

Author

Made with

About a code

CSS Candy Stripe Border Using Clip-Path

Create a responsive candy stripe border using the clip-path property on each of the list items in a ul . Change the height, background color, and stripe color very easily.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Offset and XOR Frame: Lively

Author

Made with

About a code

Offset and XOR Frame: Lively

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Full Screen Vintage Frame with Multiple Borders

Author

Made with

About a code

Full Screen Vintage Frame with Multiple Borders

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Gradient Border

Author

Made with

About a code

Gradient Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Pure CSS Circular Border Patterns

Author

Made with

About a code

Pure CSS Circular Border Patterns

The border patterns are created with clip-path on a pseudo-element.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Made with

About a code

Fitted Border Image the Easy Way

Compatible browsers: Chrome, Firefox, Opera, Safari

Demo image: Map-Inspired Border

Author

Made with

About a code

Map-Inspired Border

Map-inspired border effect using stacked border & box-shadows . Single HTML element with CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Blurred Border

Author

Made with

About a code

Blurred Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Magic Borders

Try to have a dynamic and responsive table that has borders only between cells.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Interactive Button Border

Button with an interactive border gradient.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Gradient Border

Author

Источник

Как создать рамку вокруг элемента. CSS-свойство border

CSS-свойство border используется для задания стиля, толщины и цвета границы элемента. Граница — это линия, которая окружает элемент и отделяет его контент от соседних элементов. С помощью свойства border можно создавать различные рамки — от простых одноцветных линий до сложных узоров и теней.

В общем виде свойство записывается так:

border-width — задаёт толщину границы.

border-style — устанавливает стиль рамки.

border-color — определяет цвет рамки.

Абзацу добавлена видимая граница border

Значения свойства border

Border-width

Свойство border-width определяет толщину рамки и может быть задано в пикселях ( px ), процентах ( % ) или описано ключевым словом — thin , medium , thick .

  • thin — тонкая граница, обычно около одного пикселя.
  • medium — средняя граница, около трёх пикселей.
  • thick — толстая граница, примерно пять пикселей.

Border-style

border-style — задаёт стиль границы и может принимать одно из значений — none , hidden , dotted , dashed , solid , double , groove , ridge , inset , outset .

hidden — граница скрыта, но она занимает место.

solid — сплошная линия границы.

groove — объёмная рифлёная вдавленная рамка.

ridge — объёмная рифлёная выпуклая рамка.

inset — объёмная вдавленная рамка.

outset — объёмная выпуклая рамка.

Border-color

border-color — определяет цвет рамки и может быть задан в виде ключевого слова, соответствующего названию цвета, hex-кода, rgb или hls значений. Значение currentColor использует текущий цвет текста в качестве цвета границы.

Наследование

Свойство border не наследуется от родительских элементов. Граница, заданная для одного элемента, не будет применяться к его дочерним элементам.

⭐ Свойство border поддерживается современными браузерами. Актуальная информация — на caniuse.com.

Для чего использовать свойство border

Создание стилизованной границы. Свойство border используется для создания стилизованных кнопок или ссылок с границей, которая меняет свой стиль при наведении курсора или нажатии.

Созданиетенейили выделений. Свойство border можно комбинировать с другими свойствами, такими как box-shadow или outline , для создания различных эффектов теней или выделений.

Разделение разных частей элемента. С помощью свойства border можно разделять различные части элемента, например, заголовок и содержимое блока.

Нюансы

Если нужно задать отдельные значения для каждой стороны границы, рекомендуется использовать отдельные свойства border-top , border-right , border-bottom и border-left .

Рамка с разными стилями сторон

Для создания рамок с закруглёнными углами используют свойство border-radius .

Чем заменить свойство

Для создания более сложных границ или декоративных элементов можно использовать свойства box-shadow , outline или border-image .

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Оцените статью
© 2024 Программирование