Css border left: border-left — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

border-left-style | htmlbook.ru

Management

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

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

Значение по умолчаниюНет
НаследуетсяНет
ПрименяетсяКо всем элементам
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/box.html#border-style-properties

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Устанавливает стиль границы слева от элемента.

Синтаксис

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

Значения

none
Линия не отображается и значение ее толщины обнуляется.
hidden
Имеет тот же эффект, что и none за исключением применения border-left-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае левая граница в ячейке не будет отображаться вообще.
dotted
Линия состоящая из набора точек.
dashed
Пунктирная линия, состоящая из серии коротких отрезков.
solid
Сплошная линия.
double
Двойная линия.
groove
Создает эффект вдавленной линии.
ridge
Создает эффект рельефной линии.
inset
Псевдотрехмерная линия.
outset
Псевдотрехмерная линия.
inherit
Наследует значение родителя.

Вид указанных стилей представлен на рис. 1.

Рис.1. Стили границ

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-left-style</title>
  <style>
   .
 
 line {
    border-left-color: red; /* Цвет линии слева */
    border-left-style: double; /* Стиль линии */
    border-left-width: 7px;  /* Толщина линии */
    padding-left: 10px;  /* Расстояние между линией и текстом */
   }
  </style>
 </head>
 <body> 
  <div>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
  euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim 
  ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
  ut aliquip ex ea commodo consequat.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Использование свойства border-left-style

Объектная модель

[window.]document.getElementById(«elementID»).style.borderLeftStyle

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.

Границы

CSS border left

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Полный CSS Справочник Дальше ❯


Пример

Задайте стиль левой границы для различных элементов:

h2 {
    border-left: 5px solid red;
}

h3 {
    border-left: 4px dotted blue;
}

div {
    border-left: double;
}

Определение и использование

Сокращенное свойство border-left задает все свойства левой границы в одном объявлении.

Свойства, которые могут быть заданы, должны быть в следующем порядке:

  • border-left-width
  • border-left-style (Обязательно)
  • border-left-color

Если граница-левый-цвет опущен, цвет будет применяться цвет текста.

Значение по умолчанию:medium none color
Inherited:no
Animatable:yes, see individual properties. Читайте о animatable
Version:CSS1
Синтаксис JavaScript: object.style.borderLeft=»3px dotted blue»

Поддержка браузера

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

Свойство
border-left1.04.01.03.51.0

Синтаксис CSS

border-left: border-width border-style border-color|initial|inherit;

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

ЗначениеОписание
border-left-widthОбязательно. Задает ширину левой границы. Значение по умолчанию — «Medium»
border-left-style
Обязательно. Задает стиль левой границы. Значение по умолчанию — «None»
border-left-colorДополнительные. Задает цвет левой границы. Значение по умолчанию — цвет текста
initialПрисваивает этому свойству значение по умолчанию. (Читайте о initial)
inheritНаследует это свойство из родительского элемента. (Читайте о inherit)

Похожие страницы

CSS Справочник: CSS Border

HTML DOM Справочник: borderLeft Свойство

❮ Назад Полный CSS Справочник Дальше ❯

Популярное CSS

css текст
блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css
списки css
css ширина
css при наведении
css формы

Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности О нас Контакты

border-left — CSS: Каскадные таблицы стилей

Свойство CSS border-left устанавливает все свойства левой границы элемента.

Как и все сокращенные свойства, border-left всегда устанавливает значения всех свойств, которые он может установить, даже если они не указаны. Он устанавливает для тех, которые не указаны, их значения по умолчанию. Рассмотрим следующий код:

 border-left-style: dotted;
граница слева: густо-зеленый;

На самом деле он такой же, как этот:

 стиль границы слева: пунктир;
граница слева: нет густо-зеленый;

Значение border-left-style , заданное перед border-left , игнорируется. Поскольку значение по умолчанию border-left-style

равно none , отсутствие указания части border-style приводит к отсутствию границы.

Это свойство является сокращением для следующих свойств CSS:

  • border-left-color
  • граница слева
  • граница слева ширина 
 граница слева: 1px;
граница слева: 2px пунктирная;
граница слева: средний пунктирный синий;
/* Глобальные значения */
граница слева: наследовать;
граница слева: начальная;
граница слева: вернуться;
граница слева: обратный слой;
граница слева: не установлено;

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

Значения

См. border-left-width .

<бр-стиль>

См. стиль границы слева .

<цвет>

См. border-left-color .

2 90 элементов Это также относится к ::first-letter .
Начальное значение как каждое из свойств стенографии:
  • border-left-width : medium
  • border-left-style : none
  • border-left-color : currentcolor
Унаследовано нет
Вычисленное значение как каждое из свойств сокращения:
  • абсолютная длина или левая ширина 5 :

    004 0

    , если Стиль пограничной левой стороны — Нет или Скрытый
  • Стиль пограничной коробки : как указано
  • . type
 как каждое из свойств сокращенной записи:
  • border-left-color : a color
  • border-left-style : дискретный
  • border-left-width
    : 6 a length     : 6 a length0045
 граница слева = 
  || 
 <стиль строки> || 
 <цвет> 
 "> = 
  | 
 тонкий | 
 средний | 
 толстый 
 
 "> = 
 нет | 
 скрыто | 
 с точками | 
 пунктир | 
 твердый | 
 двойной | 
 канавка | 
 хребет | 
 вставка | 
 начало

Применение левой границы

HTML 
 
Это поле имеет границу слева.
CSS 
 раздел {
  граница слева: 4 пикселя пунктирная синяя;
  цвет фона: золото;
  высота: 100 пикселей;
  ширина: 100 пикселей;
  вес шрифта: полужирный;
  выравнивание текста: по центру;
}
Результаты
Спецификация
Фоны CSS и границы. 0007 с включенным JavaScript. Включите JavaScript для просмотра данных.
  • граница
  • пограничный блок
  • контур
  • Фоны и рамки
  • Изучение CSS: фоны и границы

Последнее изменение: , участниками MDN

CSS Border-left Property

❮ Предыдущая Полное руководство по CSS Далее ❯


Пример

Установить стиль левой границы для разных элементов:

h2 {
 граница слева: 5 пикселей сплошной красный цвет;

}

h3 {
граница слева: 4 пикселя с синими точками;
}

div {
  граница слева: двойная;
}

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

Определение и использование

Свойство border-left является сокращенным свойство for (в следующем порядке):

  • border-left-width
  • левый бордюр (обязательно)
  • граница левого цвета

Если граница-левого-цвета опущена, применяемый цвет будет цветом текст.

Показать демо ❯

Значение по умолчанию: средний нет цветной
По наследству: нет
Анимация: да, см. отдельные свойства . Читать про анимированный Попробуй это
Версия: CSS1
Синтаксис JavaScript: объект .style.borderLeft="3px с синими точками" Попробуй это

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Собственность
граница левая 1,0 4,01.0 3,5 1,0

Синтаксис CSS

border-left: border-width border-style border-color |initial|inherit;

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

Значение Описание Демо
граница слева Дополнительно. Определяет ширину левой границы. Значение по умолчанию "средний"
Демонстрация ❯
левый край Обязательно. Определяет стиль левой границы. Значение по умолчанию "нет" Демонстрация ❯
граница левая Дополнительно. Определяет цвет левой границы. Значение по умолчанию цвет текста Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать о начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Связанные страницы

Учебник CSS: Граница CSS

Ссылка HTML DOM: свойство borderLeft

❮ Предыдущая Полное руководство по CSS Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

  • FORUM | О

    W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *