Css solid что это: Значение сплошной solid css html

Leave a Comment / Css / By /

CSS свойство border-style

❮ Назад Вперед ❯

CSS свойство border-style устанавливает все границы элемента. Это сокращенное свойство для установления border-top-style, border-bottom-style, border-left-style, border-right-style.

Свойство может иметь от одного до четырёх значений. Каждая сторона может иметь своё значение.

Значение по умолчанию для border-style — none. Границы расположены с верхней стороны фоновой части элемента.

Некоторые браузеры могут не поддерживать какой-то стиль. Обычно, если стиль не поддерживается, браузер отображает границы как solid.

Свойство border-style может быть установлено используя одно, две, три или четыре значения. Если установлено одно значение, оно применяется для всех сторон. Если установлены две значения, первое из них применяется для верхней и нижней стороны, а второе для левой и правой стороны. Если установлены три значения, первое применяется для верхней стороны, второе для левой и правой, а третье для нижней стороны.

Если установлены четыре значения, стили поочередно применяются для верхней, правой, нижней и левой стороны.

border-style: none |hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial |inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      border-style: dotted;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <p>Пример dotted border-style.</p>
  </body>
</html>

Попробуйте сами!

В данном примере все стороны имеют одинаковое значение. Рассмотрим пример, где каждая сторона имеет своё значение:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      border-width: 4px;
      border-style: double solid dashed dotted;
      border-color: #1c87c9;
      color: #8ebf42;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <p> Пример, где каждая сторона имеет своё значение.
  </p>
  </body>
</html>

Попробуйте сами!

Пример, где использованы все четыре значения:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background: #eee;
      font-size: 20px;
      text-align: center;
      }
      main div {
      display: flex;
      align-items: center;      
      justify-content: center;
      color: black;
      padding-top: 30px;
      padding-bottom: 30px;
      width: 200px;
      height: 100px;
      margin: 15px;
      font-weight: bold;
      background-color: #c9c5c5;
      border: 8px solid #1c87c9;
      }
      .flex-center {
      display: flex;
      justify-content: center;
      }
      /* border-style example classes */
      .b1 { border-style: hidden; }
      .
 
 b2 { border-style: dotted;}
      .b3 { border-style: dashed;}
      .b4 { border-style: solid;}
      .b5 { border-style: double;}
      .b6 {border-style: groove;}
      .b7 {border-style: ridge;}
      .b8 {border-style: inset;}
      .b9 {border-style: outset;}
    </style>
  </head>
  <body>
    <h3>Примеры значения border-style</h3>
    <main>
      <div>
        hidden
      </div>
      <div >
        dotted
      </div>
      <div >
        dashed
      </div>
    </main>
    <main>
      <div >
        solid
      </div>
      <div>
        double
      </div>
      <div>
        groove
      </div>
    </main>
    <main>
      <div>
        ridge
      </div>
      <div>
        inset
      </div>
      <div>
        outset
      </div>
    </main>
  </body>
</html>

Попробуйте сами!

border-bottom ⚡️ HTML и CSS с примерами кода

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

Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству.

Фон
  • border
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-image
  • border-image-outset
  • border-image-repeat
  • border-image-slice
  • border-image-source
  • border-image-width
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-radius
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-style
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • box-shadow

Синтаксис

border-bottom: 1px;
border-bottom: 2px dotted;
border-bottom: medium dashed blue;

Значения

Значение border-bottom-width определяет толщину границы. Для управления её видом предоставляется несколько значений свойства border-bottom-style. Их названия и результат действия представлен на рис. 1.

border-bottom-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

Значение по-умолчанию: Зависит от использования

Применяется к: Ко всем элементам

Спецификации

  • CSS Backgrounds and Borders Module Level 3
  • CSS Level 2 (Revision 1)
  • CSS Level 1

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>border-bottom</title>
    <style>
      .panel {
        background: #ccc; /* Цвет фона */
      }
      .panel p.content {
        padding: 5px; /* Добавляем поля */
        margin: 0; /* Убираем отступы у параграфа */
        border-top: 2px dotted white; /* Параметры линии вверху */
      }
      .panel p.title {
        font-family: sans-serif; /* Рубленый шрифт */
        font-weight: bold; /* Жирное начертание */
        font-size: 90%; /* Размер шрифта */
        padding: 5px; /* Добавляем поля */
        margin: 0; /* Убираем отступы у параграфа */
        background: maroon; /* Цвет фона */
        color: white; /* Цвет текста */
        border-bottom: 2px solid white; /* Параметры линии внизу */
      }
    </style>
  </head>
  <body>
    <div>
      <p>
        Резкий базовый тип личности глазами современников
      </p>
      <p>
        Его экзистенциальная тоска выступает как
        побудительный мотив творчества, однако пародия
        многопланово заканчивает общекультурный цикл.
  </p>
    </div>
  </body>
</html>

html — Как сделать плоскую не сплошную рамку с помощью css?

спросил

Изменено 2 года, 10 месяцев назад

Просмотрено 709 раз

Я хочу сделать плоскую рамку, как эта,

Не должно быть так:

 .demo{
  высота: 60 ​​пикселей;
  ширина: 90%;
  запас: 2рем авто;
  ширина границы: 5px;
  стиль границы: сплошной;
  цвет границы: #007bff #ddd;
}

Думаю, это было сделано CSS до/после. Но помните, что на самом деле это сделано не с использованием свойства границы. Мне нужны такие же вещи, как на этом фото. Я понятия не имею, как это сделать.

[Q1] Мне нужно много промежутков или раньше после ширины? (Пожалуйста, дайте простой дизайн)

[Q2] Как WordPress делает поле заголовка статьи? они используются до / после или много вяза? (я уже проверяю редактор WordPress, но ничего не нахожу)

  • HTML
  • CSS

4

 . демо {
  высота: 60 ​​пикселей;
  ширина: 90%;
  запас: 2рем авто;
  положение: родственник;
  граница слева: 4px сплошная #000;
  box-sizing: граница-коробка;
}

.demo:: после {
  сверху: 0;
  слева: 0;
  содержание: '';
  ширина: 100%;
  высота: 100%;
  положение: абсолютное;
  box-sizing: граница-коробка;
  граница: 1px сплошная #ddd;
  граница слева: нет;
}

Попробуйте это, это небольшой хак со свойством :before :

 .demo{
    граница слева: сплошной черный цвет 5px;
    ширина: 90%;
    высота: 50 пикселей;
    должность: родственница;
}
.демо:до{
    содержание:"";
    сверху: 0;
    слева: 0;
    положение: абсолютное;
    граница: 1px сплошной светло-серый;
    граница слева: нет;
    ширина: 100%;
    высота: 100%;
    box-sizing: граница-коробка;
}

Или другим способом:

HTML

 <дел>
  <дел>
  <дел>

CSS

 .card {
  дисплей: гибкий;
  выравнивание элементов: по центру;
}
. левая панель {
  ширина: 5 пикселей;
  высота: 50 пикселей;
  фон: черный;
  граница сверху: 1px сплошной черный;
  нижняя граница: 1px сплошной черный;
}
.демо{
    граница: сплошная 1px серая;
    граница слева: 0px;
    ширина: 200 пикселей;
    высота: 50 пикселей;
}

Может поможет

Градиент может. Просто отрегулируйте порядок, чтобы контролировать, какой из них будет в топ-9.0005

 .демо{
  высота: 60 ​​пикселей;
  ширина: 90%;
  запас: 2рем авто;
  граница: 5px сплошная прозрачная;
  задний план:
    linear-gradient(#007bff,#007bff) left /5px 100%, /* Верхний слой */
    линейный градиент (красный, красный) вправо / 5px 100%,
    линейный градиент (#ddd, #ddd) снизу /100% 2px,
    линейный градиент (синий, синий) сверху / 100% 2px; /* Нижний слой */
  повторение фона: без повторения;
} 
 <дел>

попробуй так :- display: table;

 .демо {
    дисплей: таблица;
    граница коллапса: коллапс;
    ширина: 90%;
    поле: 2em авто;
}
. клетка {
    отображение: таблица-ячейка;
    граница: 1px сплошная #b6bdc2;
    ширина: 90%;
    высота: 60 ​​пикселей;
    -webkit-box-sizing: рамка-бокс;
    -moz-box-sizing: рамка-бокс;
    box-sizing: граница-коробка;
    ширина левой границы: 4 пикселя;
    цвет левой границы: #5d646c;
}
<дел>
  <дел>

Может поможет

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

css — Должен ли я использовать «граница: нет» или «граница: 0»?

(примечание: этот ответ был обновлен 1 августа 2014 г. , чтобы сделать его более подробным, более точным и добавить живую демонстрацию)

Расширение свойств Shortand

В соответствии со спецификацией W3C CSS2.1 ( » Пропущенные значения устанавливаются в исходные значения» ), следующие свойства эквивалентны:

 граница: скрытая; стиль границы: скрытый;
                   ширина границы: средняя;
                   border-color: <то же, что и свойство 'color'>
граница: нет; бордюрный стиль: нет;
                   ширина границы: средняя;
                   border-color: <то же, что и свойство 'color'>
граница: 0; бордюрный стиль: нет;
                   ширина границы: 0;
                   border-color: <то же, что и свойство 'color'>

Если эти правила наиболее специфичны для границ элемента, то границы не будут отображаться либо из-за нулевой ширины, либо из-за стиля hidden / none . Итак, на первый взгляд эти три правила выглядят эквивалентно. Однако они ведут себя по-разному в сочетании с другими правилами.

Границы в контексте таблицы в модели сворачивающихся границ

Когда таблица визуализируется с использованием border-collapse: Collapse , каждая отображаемая граница является общей для нескольких элементов (внутренние границы являются общими для соседних ячеек; внешние границы являются общими). между ячейками и самой таблицей, но также строки, группы строк, столбцы и группы столбцов имеют общие границы). Спецификация определяет некоторые правила разрешения пограничных конфликтов:

  1. Границы с стилем границы из скрытых имеют приоритет над всеми другими конфликтующими границами. […]

  2. Границы со стилем нет имеют самый низкий приоритет. […]

  3. Если ни один из стилей не является скрытым и хотя бы один из них не none , то узкие границы отбрасываются в пользу более широких. […]

  4. Если стили границ отличаются только цветом, […]

Таким образом, в контексте таблицы border: hidden (или border-style: hidden ) будет иметь наивысший приоритет и сделает общую границу скрытой, несмотря ни на что.