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

Html inline style border color

Содержание
  1. border — inline
  2. Пример
  3. Как понять
  4. Как пишется
  5. Подсказки
  6. border
  7. Try it
  8. Constituent properties
  9. Syntax
  10. Values
  11. Description
  12. Borders vs. outlines
  13. Formal definition
  14. Formal syntax
  15. Examples
  16. Setting a pink outset border
  17. HTML
  18. CSS
  19. Result
  20. Specifications
  21. Browser compatibility
  22. See also
  23. Found a content problem with this page?
  24. MDN
  25. Support
  26. Our communities
  27. Developers
  28. CSS border-inline-color Property
  29. Browser Support
  30. border-color
  31. Try it
  32. Constituent properties
  33. Syntax
  34. Values
  35. Formal definition
  36. Formal syntax
  37. Examples
  38. Complete border-color usage
  39. HTML
  40. CSS
  41. Result
  42. Specifications
  43. Browser compatibility
  44. See also
  45. Found a content problem with this page?
  46. MDN
  47. Support
  48. Our communities
  49. Developers

border — inline

border — inline — это логическое свойство-шорткат. Оно создаёт у элемента рамки по строчной оси.

Блочная ось связана с направлением потока сайта. Так, для русского и английского языков border — inline рисует границу слева и справа элемента, а для японского сверху и снизу.

Пример

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

 div  border-inline: 5px solid white;> div  border-inline: 5px solid white; >

Как понять

Скопировать ссылку «Как понять» Скопировано

border — inline помогает располагать границы там, где они должны быть, вне зависимости от языка 😎

Нарисуем границы с помощью border — left и border — right :

 div  border-left: 7px dashed white; border-right: 7px dashed white;> div  border-left: 7px dashed white; border-right: 7px dashed white; >

А теперь текст будет на японском языке, для этого сменим поток и посмотрим, что будет:

 div  writing-mode: vertical-rl; border-left: 7px dashed white; border-right: 7px dashed white;> div  writing-mode: vertical-rl; border-left: 7px dashed white; border-right: 7px dashed white; >

Язык другой, направление письма другое, а границы всё там же — справа и слева. Это не очень хорошо с точки зрения людей, которые говорят на разных языках. Попробуем исправить это с помощью свойства border — inline :

 div  writing-mode: vertical-rl; border-inline: 7px dashed white;> div  writing-mode: vertical-rl; border-inline: 7px dashed white; >

Сейчас всё логично: стиль письма изменил своё направление и границы тоже поменялись. Использование логического свойства исправило ситуацию.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

border — inline пишется так же, как и border , а ещё сокращает такие же свойства. Отличие лишь в том, что border в записи заменяется на border — inline :

  • border — inline — width — ширина границы;
  • border — inline — style — стиль границы;
  • border — inline — color — цвет границы.

Можно отдельно стилизовать одну из границ по аналогии с border — left и border — right :

  • border — inline — start — первая граница по направлению строчной оси;
  • border — inline — end — вторая граница.

Подсказки

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

💡 Когда нужно, чтобы видимые границы блока разместились в направлении блочной оси, используйте свойство border — block .

 div  border-block: 5px solid white;> div  border-block: 5px solid white; >

Источник

border

The border shorthand CSS property sets an element’s border. It sets the values of border-width , border-style , and border-color .

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* style */ border: solid; /* width | style */ border: 2px dotted; /* style | color */ border: outset #f33; /* width | style | color */ border: medium dashed green; /* Global values */ border: inherit; border: initial; border: revert; border: revert-layer; border: unset;

The border property may be specified using one, two, or three of the values listed below. The order of the values does not matter.

Note: The border will be invisible if its style is not defined. This is because the style defaults to none .

Values

Sets the thickness of the border. Defaults to medium if absent. See border-width .

Sets the style of the border. Defaults to none if absent. See border-style .

Sets the color of the border. Defaults to currentcolor if absent. See border-color .

Description

As with all shorthand properties, any omitted sub-values will be set to their initial value. Importantly, border cannot be used to specify a custom value for border-image , but instead sets it to its initial value, i.e., none .

The border shorthand is especially useful when you want all four borders to be the same. To make them different from each other, however, you can use the longhand border-width , border-style , and border-color properties, which accept different values for each side. Alternatively, you can target one border at a time with the physical (e.g., border-top ) and logical (e.g., border-block-start ) border properties.

Borders vs. outlines

Borders and outlines are very similar. However, outlines differ from borders in the following ways:

  • Outlines never take up space, as they are drawn outside of an element’s content.
  • According to the spec, outlines don’t have to be rectangular, although they usually are.

Formal definition

  • border-width : as each of the properties of the shorthand:
    • border-top-width : medium
    • border-right-width : medium
    • border-bottom-width : medium
    • border-left-width : medium
    • border-top-style : none
    • border-right-style : none
    • border-bottom-style : none
    • border-left-style : none
    • border-top-color : currentcolor
    • border-right-color : currentcolor
    • border-bottom-color : currentcolor
    • border-left-color : currentcolor
    • border-width : as each of the properties of the shorthand:
      • border-bottom-width : the absolute length or 0 if border-bottom-style is none or hidden
      • border-left-width : the absolute length or 0 if border-left-style is none or hidden
      • border-right-width : the absolute length or 0 if border-right-style is none or hidden
      • border-top-width : the absolute length or 0 if border-top-style is none or hidden
      • border-bottom-style : as specified
      • border-left-style : as specified
      • border-right-style : as specified
      • border-top-style : as specified
      • border-bottom-color : computed color
      • border-left-color : computed color
      • border-right-color : computed color
      • border-top-color : computed color
      • border-color : as each of the properties of the shorthand:
        • border-bottom-color : a color
        • border-left-color : a color
        • border-right-color : a color
        • border-top-color : a color
        • border-bottom-width : a length
        • border-left-width : a length
        • border-right-width : a length
        • border-top-width : a length

        Formal syntax

        border =
        ||
        ||

        =
        |
        thin |
        medium |
        thick

        =
        none |
        hidden |
        dotted |
        dashed |
        solid |
        double |
        groove |
        ridge |
        inset |
        outset

        Examples

        Setting a pink outset border

        HTML

        div>I have a border, an outline, and a box shadow! Amazing, isn't it?div>

        CSS

        div  border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.5rem; >

        Result

        Specifications

        Browser compatibility

        BCD tables only load in the browser

        See also

        Found a content problem with this page?

        This page was last modified on Jul 18, 2023 by MDN contributors.

        Your blueprint for a better internet.

        MDN

        Support

        Our communities

        Developers

        Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
        Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

        Источник

        CSS border-inline-color Property

        The border-inline-color property sets the color of an element’s borders in the inline direction.

        Note: For the border-inline-color property to take effect, the border-inline-style must be set.

        Values for the border-inline-color property can be set in different ways:

        If the border-inline-color property has two values:

        • border-inline-color: pink blue;
          • border color at inline start is pink
          • border color at inline end is blue

          If the border-inline-color property has one value:

          The CSS border-inline-color property is very similar to CSS properties border-bottom-color , border-left-color , border-right-color and border-top-color , but the border-inline-color property is dependent on inline direction.

          Note: The related CSS properties writing-mode , text-orientation and direction define inline direction. This affects where the start and end of a line is and the result of the border-inline-color property. For pages in English, inline direction is left to right and block direction is downward.

          Default value: The current color of the element
          Inherited: no
          Animatable: yes. Read about animatable Try it
          Version: CSS3
          JavaScript syntax: object.style.borderInlineColor=»pink» Try it

          Browser Support

          The numbers in the table specify the first browser version that fully supports the property.

          Источник

          border-color

          The border-color shorthand CSS property sets the color of an element’s border.

          Try it

          You can find more information about border colors in CSS colors.

          Constituent properties

          This property is a shorthand for the following CSS properties:

          Syntax

          /* values */ border-color: red; /* top and bottom | left and right */ border-color: red #f015ca; /* top | left and right | bottom */ border-color: red rgb(240, 30, 50, 0.7) green; /* top | right | bottom | left */ border-color: red yellow green blue; /* Global values */ border-color: inherit; border-color: initial; border-color: revert; border-color: revert-layer; border-color: unset;

          The border-color property may be specified using one, two, three, or four values.

          • When one value is specified, it applies the same color to all four sides.
          • When two values are specified, the first color applies to the top and bottom, the second to the left and right.
          • When three values are specified, the first color applies to the top, the second to the left and right, the third to the bottom.
          • When four values are specified, the colors apply to the top, right, bottom, and left in that order (clockwise).

          Values

          Defines the color of the border.

          Formal definition

          • border-top-color : currentcolor
          • border-right-color : currentcolor
          • border-bottom-color : currentcolor
          • border-left-color : currentcolor
          • border-bottom-color : computed color
          • border-left-color : computed color
          • border-right-color : computed color
          • border-top-color : computed color
          • border-bottom-color : a color
          • border-left-color : a color
          • border-right-color : a color
          • border-top-color : a color

          Formal syntax

          Examples

          Complete border-color usage

          HTML

          div id="justone"> p>code>border-color: red;code> is equivalent top> ul> li>code>border-top-color: red;code>li> li>code>border-right-color: red;code>li> li>code>border-bottom-color: red;code>li> li>code>border-left-color: red;code>li> ul> div> div id="horzvert"> p>code>border-color: gold red;code> is equivalent top> ul> li>code>border-top-color: gold;code>li> li>code>border-right-color: red;code>li> li>code>border-bottom-color: gold;code>li> li>code>border-left-color: red;code>li> ul> div> div id="topvertbott"> p>code>border-color: red cyan gold;code> is equivalent top> ul> li>code>border-top-color: red;code>li> li>code>border-right-color: cyan;code>li> li>code>border-bottom-color: gold;code>li> li>code>border-left-color: cyan;code>li> ul> div> div id="trbl"> p>code>border-color: red cyan black gold;code> is equivalent top> ul> li>code>border-top-color: red;code>li> li>code>border-right-color: cyan;code>li> li>code>border-bottom-color: black;code>li> li>code>border-left-color: gold;code>li> ul> div>

          CSS

          #justone  border-color: red; > #horzvert  border-color: gold red; > #topvertbott  border-color: red cyan gold; > #trbl  border-color: red cyan black gold; > /* Set width and style for all divs */ div  border: solid 0.3em; width: auto; margin: 0.5em; padding: 0.5em; > ul  margin: 0; list-style: none; >

          Result

          Specifications

          Browser compatibility

          BCD tables only load in the browser

          See also

          • Border-color related CSS properties: border , border-top-color , border-right-color , border-bottom-color , border-left-color ,
          • Other border-related CSS properties: border-width , border-style
          • The data type
          • Other color-related properties: color , background-color , outline-color , text-decoration-color , text-emphasis-color , text-shadow , caret-color , and column-rule-color
          • Applying color to HTML elements using CSS

          Found a content problem with this page?

          This page was last modified on Jul 18, 2023 by MDN contributors.

          Your blueprint for a better internet.

          MDN

          Support

          Our communities

          Developers

          Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
          Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

          Источник

          Читайте также:  Обновить новая версия java
Оцените статью
© 2024 Программирование