Линия слева в ворде как убрать
Перейти к содержимому

Линия слева в ворде как убрать

Как добавить вертикальную линию к тексту?

Цветная линия возле текста привлекает к нему внимание, а цвет линии и фона может информировать о разном статусе текста — цитата, сообщение, предупреждение, важная информация и др.

Для вывода линии слева от текста применяется свойство border-left, оно создаёт линию заданной толщины, стиля и цвета. При этом высота линии привязывается к высоте текста и меняется вместе с ним. Чтобы линия и фон не прилегали плотно к тексту, расстояние от края до текста регулируется с помощью свойства padding.

В примере 1 используется класс callout , с помощью которого добавляется необходимый стиль. Цвет линии определяется через вспомогательные классы info , warning и alert .

Пример 1. Использование border-left

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

Линия с текстом

Рис. 1. Линия с текстом

См. также

  • border-left
  • margin в CSS
  • padding
  • Блочные элементы
  • Колесо для сокращённых свойств
  • Отзывчивый веб-дизайн
  • Открываем блочную модель
  • Свойства текста в CSS
  • Строчные элементы

Расчет деталей, механизмов и систем двигателей внутреннего сгорания математическими методами с применением программы Mathcad

Приведены основы дифференциального и интегрального исчисления функции одной действительной переменной. Рассмотрены дифференциальные уравнения и показано их практическое применение при решении технических задач. Даны примеры расчёта систем двигателей с применением интегральных и дифференциальных уравнений. Вывод формул, определение производных, интегралов, построение графиков даётся как обычными математическими методами, так и с применением системы Mathcad. Дан расчёт цикла тепловозного дизельного двигателя с автоматическим построением индикаторной диаграммы в системе Mathcad. Для студентов технических специальностей при изучении как математики, так и прикладных дисциплин. Может быть полезно инженерам и аспирантам.

Adobe Flash CS3 – это просто! Создаем Web-анимацию

Приводятся общие сведения о работе в программе Adobe Flash CS3. Подробно описан интерфейс программы, даны основные приемы работы. Отдельно рассмотрены вопросы рисования во Flash-фильме, настройки анимации, программирования интерактивных элементов и экспорта Flash-фильма. Книга актуальна для пользователей обоих изданий Flash Standard и Flash Professional, причем большая часть материала будет полезной и тем, кто еще работает с предыдущей версией Flash 8. Видеокурс, прилагаемый к книге на компакт-диске, отлично дополняет материал и дает читателю возможность посмотреть, как осуществляется работа во Flash на практике. Файлы для книги можно скачать по ссылке ftp://ftp.bhv.ru/9785977500449.zip

border-radius

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

Интерактивный пример

Скругление применяется ко всему background , даже если элемент не имеет границ, точное положение отсечения определяется свойством background-clip .

Свойство border-radius не применяется к элементам таблицы, когда свойство border-collapse (en-US) имеет значение collapse .

Примечание: Как и с любым другим сокращённым свойством, отдельные подсвойства не могут наследоваться. Например, как в border-radius:0 0 inherit inherit , что будет частично переопределять существующие определения. Вместо этого должны использоваться отдельные длинные свойства.

Синтаксис

/* Такой синтаксис позволяет указать всего одно значение, вместе четырёх */ /* Скругление применяется ко всем четырём углам */ border-radius: 10px; /* top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5%; /* top-left | top-right-and-bottom-left | bottom-right */ border-radius: 2px 4px 2px; /* top-left | top-right | bottom-right | bottom-left */ border-radius: 1px 0 3px 4px; /* Синтаксис из двух радиусов также может применяться ко всем четырём углам */ /* (первые значения радиуса) /радиус */ border-radius: 10px 5% / 20px; /* (первые значения радиуса) / top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5% / 20px 30px; /* (первые значения радиуса) / top-left | top-right-and-bottom-left | bottom-right */ border-radius: 10px 5px 2em / 20px 25px 30%; /* (первые значения радиуса) / top-left | top-right | bottom-right | bottom-left */ border-radius: 10px 5% / 20px 25em 30px 35em; /* Глобальные значения */ border-radius: inherit; border-radius: initial; border-radius: unset; 

Свойство border-radius может быть задано как:

  • одно, два, три или четыре значения или . Используется для задания обычного радиуса углов.
  • одна, две, три или четыре пары значений or , разделённые «/». Используется для задания эллиптического скругления.

Значения

radius all-corner.png или устанавливает радиус скругления для всех углов элемента. Может быть указано только одно значение (или одна пара).
top-left-and-bottom-right top-left-bottom-right.png или устанавливает радиус для верхнего левого и нижнего правого угла элемента. Следует использовать синтаксис с двумя значениями.
top-right-and-bottom-left top-right-bottom-left.png или устанавливает радиус для верхнего правого и нижнего левого угла элемента. Можно использовать синтаксис с двумя или тремя значениями.
top-left top-left.png или устанавливает радиус для левого верхнего угла элемента. Можно использовать синтаксис с тремя и четырьмя значениями.
top-right top-right.png или устанавливает радиус для верхнего правого угла элемента. Следует использовать синтаксис с четырьмя значениями.
bottom-right bottom-rigth.png или устанавливает радиус для нижнего правого угла элемента. Можно использовать синтаксис с тремя и четырьмя значениями.
bottom-left bottom-left.png или устанавливает радиус для нижнего левого угла элемента. Следует использовать синтаксис с четырьмя значениями.

Обозначает размер радиуса окружности или две полуоси эллипса. Может быть выражена в любых единицах CSS. Отрицательные значения не принимаются.

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

border-radius: 1em/5em; /* . эквивалентно этому: */ border-top-left-radius: 1em 5em; border-top-right-radius: 1em 5em; border-bottom-right-radius: 1em 5em; border-bottom-left-radius: 1em 5em; 
border-radius: 4px 3px 6px / 2px 4px; /* . эквивалентно этому: */ border-top-left-radius: 4px 2px; border-top-right-radius: 3px 4px; border-bottom-right-radius: 6px 2px; border-bottom-left-radius: 3px 4px; 

Формальный синтаксис

border-radius =
(en-US) (en-US) [ (en-US) / (en-US) (en-US) ] (en-US) ? (en-US)

=
| (en-US)

Примеры

pre id="example-1"> border: solid 10px; border-radius: 10px 40px 40px 10px; pre > pre id="example-2"> border: groove 1em red; border-radius: 2em; pre > pre id="example-3"> background: gold; border: ridge gold; border-radius: 13em/3em; pre > pre id="example-4"> border: none; border-radius: 40px 10px; background: gold; pre > pre id="example-5"> border: none; border-radius: 50%; background: burlywood; pre > pre id="example-6"> border: dotted; border-width: 10px 4px; border-radius: 10px 40px; pre > pre id="example-7"> border: dashed; border-width: 2px 4px; border-radius: 40px; pre > 
pre  margin: 20px; padding: 20px; width: 80%; height: 80px; > pre#example-1  border: solid 10px; border-radius: 10px 40px 40px 10px; > pre#example-2  border: groove 1em red; border-radius: 2em; > pre#example-3  background: gold; border: ridge gold; border-radius: 13em/3em; > pre#example-4  border: none; border-radius: 40px 10px; background: gold; > pre#example-5  border: none; border-radius: 50%; background: burlywood; > pre#example-6  border: dotted; border-width: 10px 4px; border-radius: 10px 40px; > pre#example-7  border: dashed; border-width: 2px 4px; border-radius: 40px; > 

Живые примеры

  • Пример 1: http://jsfiddle.net/Tripad/qnGKj/2/
  • Пример 2: http://jsfiddle.net/Tripad/qnGKj/3/
  • Пример 3: http://jsfiddle.net/Tripad/qnGKj/4/
  • Пример 4: http://jsfiddle.net/Tripad/qnGKj/5/
  • Пример 5: http://jsfiddle.net/Tripad/qnGKj/6/

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

Specification
CSS Backgrounds and Borders Module Level 3
# border-radius
  • border-top-left-radius (en-US): 0
  • border-top-right-radius (en-US): 0
  • border-bottom-right-radius (en-US): 0
  • border-bottom-left-radius (en-US): 0
  • border-bottom-left-radius (en-US): две абсолютных length или percentage
  • border-bottom-right-radius (en-US): две абсолютных length или percentage
  • border-top-left-radius (en-US): две абсолютных length или percentage
  • border-top-right-radius (en-US): две абсолютных length или percentage
  • border-top-left-radius (en-US): длина, проценты или calc();
  • border-top-right-radius (en-US): длина, проценты или calc();
  • border-bottom-right-radius (en-US): длина, проценты или calc();
  • border-bottom-left-radius (en-US): длина, проценты или calc();

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

  • Относящиеся к Border-radius CSS-свойства: border-top-left-radius (en-US), border-top-right-radius (en-US), border-bottom-right-radius (en-US), border-bottom-left-radius (en-US)

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 11 окт. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

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.

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

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