Закругленные углы html: Скруглённые уголки | htmlbook.ru

12.8. Закруглить углы

12.8. Закруглить углы

12.8.1. Общая информация

Рисунок 17.276. Пример применения фильтра «Закруглить углы»

Исходное изображение

После применения фильтра «Закруглить углы»

Этот фильтр округляет углы изображения и может добавить тень к изображению как слой фона.

Этот фильтр работает над изображениями RGB и серыми изображениями с одним слоем. Его можно применить как к самому изображению, так и к его копии. Он использует текущий цвет фона для создания слоя фона.

12.8.2. Активация фильтра

Этот фильтр находится в меню изображения Фильтры → Декорация → Скруглённые углы….

12.8.3. Параметры

Рисунок 17.277. Параметры фильтра «Закруглить углы»

Радиус границы

Углы закругляются выбором квадранта круга в каждом углу и удалением области вне выделения. «Радиус границы» это радиус круга в углу.

В примерах ниже фильтр был применён к изображению 100×100 точек с разным значением радиуса границы. При радиусе равном 50-ти четыре квадранта образуют круг с диаметром в 100 точек. Больший радиус возможен, но с неожиданными последствиями.

Рисунок 17.278. Примеры радиуса границы

Радиус границы: 15 (по умолчанию)

Радиус границы: 35

Радиус границы: 50

Радиус границы: 65

Добавить тень

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

Смещение тени по X/Y

Смещение по X и Y определяют, где будет помещена тень по отношению к изображению. Смещение измеряется в точках. При больших значениях параметра тень будет казаться далеко, при маленьких — ближе к изображению.

Рисунок 17.279. пример смещения тени

Смещение тени по X : 8, по Y : 8 (по умолчанию).

Смещение тени по X : 16, по Y : 4.

Заметьте, что смещение тени и радиус размывания влияют на смещение только внутри области фона.

Радиус размывания

Если выбран параметр Добавить тень, то можно указать радиус размывания, используемый фильтром «Тень». Изображение будет увеличено в обоих направлениях в зависимости от величины радиуса размывания и от смещения тени.

Добавить фон

При выборе этого параметра (выбран по умолчанию) фильтр добавляет под активный слой слой фона, заполненный текущим цветом фона. Размер нового слоя зависит от радиуса размывания и от смещения тени.

Работать с копией

При выборе этого параметра фильтр создаёт новое окно, содержащее копию изображения с эффектом фильтра. Исходное изображение остаётся неизменным.

Bootstrap 4 — Управление границами и скруглениями углов элементов

Статья, в которой рассмотрим классы Bootstrap 4 для работы с границами и скруглениями углов элементов.

Добавление и удаление границ

Для управления границами элемента предназначены классы border, border-0, border-top, border-right, border-bottom, border-left, border-top-0, border-right-0, border-bottom-0 и border-left-0.

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

устанавливает верхнюю границу, border-right – правую, border-bottom – нижнюю, а border-left – левую. Другая часть классов (border-top-0, border-right-0, border-bottom-0 и border-left-0) выполняет обратное действие, а именно убирает одну из границ (border-top-0 – верхнюю, border-right-0 – правую, border-bottom-0 – нижнюю, border-left-0 – левую). Последний класс из этой группы (border-0) предназначен для убирания у элемента всех границ.

Например, для установления верхней и нижней границы HTML элементу можно воспользоваться одним из следующих 2 способов:

<!-- Добавляем все границы и убираем 2 (левую и правую) -->
<div></div>
<!-- Добавляем верхнюю и нижнюю границу -->
<div></div>

Пример, как к элементу можно добавить только левую границу:

<!-- Добавляем границы с помощью класса border и убираем все кроме левой -->
<div></div>
<!-- Устанавливаем границу с помощью border-left -->
<div></div>

Например, для того убрать все границы у элемента к нему необходимо добавить класс border-0.

<!-- Удаляем все границы у элемента -->
<div></div>

Классы для изменения цвета границ

Для задания цвета границ, предназначены классы border-{theme}. Вместо {theme} необходимо указать название темы (primary, secondary, success, danger, warning, info, light, dark или white).

Например, добавим к элементу границу справа и установим для неё тему

success.

<!-- 1 вариант -->
<div></div>
<!-- 2 вариант -->
<div></div>

Например, добавим к элементу границу снизу с темой danger.

<!-- 1 вариант -->
<div></div>
<!-- 2 вариант -->
<div></div>

Скругление углов элемента

Во фреймворке Bootstrap 4 имеются классы, с помощью которых можно очень просто скруглять углы элементам. Одни классы (rounded, rounded-circle) выполняют это действие для всех углов, а другие (rounded-top, rounded-right, rounded-bottom, rounded-left) — только для определённых. Кроме этого, в Bootstrap 4 имеется класс (rounded-0), который позволяет выполнить обратное действие, а именно убрать скругление углов.

Принцип действия этих классов основан на использовании CSS свойства border-radius.

Например, создадим кнопку со скруглёнными углами:

<span>
  Наведи на меня курсор
</span>

Например, сделаем изображение круглым (rounded-circle):

<!-- Как сделать изображение круглым -->
<img src="elephant.jpg" alt="Круглое изображение...">

Пример, как можно сделать изображение со скруглёнными краями (rounded) и скргулёнными только справа (rounded-right):

<!-- Изображение со скруглёнными углами -->
<img src="elephant. jpg" alt="Круглое изображение...">
<!-- Изображение, имеющее скругленные углы только справа -->
<img src="elephant.jpg" alt="Круглое изображение...">

Добавление закругленных углов к контейнерам в Outlook

Внедрение электронной почты в 2021: как добавить закругленные углы к контейнерам в Outlook

Закругленные углы и Outlook. Звучит просто, правда? Существует несколько подходов к их реализации, но ни один из них не является простым. Так какой из них лучший?

---

Martin Hejtmanek11 августа 2021 г.

Если вы пропустили введение, прочитайте Основы и как тестировать сгенерированные электронные письма.

Я обсуждал использование объектов VML для усиления поддержки закругленных углов в Outlook в своих предыдущих статьях о закругленных кнопках и закругленных встроенных тегах.

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

Что тут сложного?

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

Это не работает в случае общих контейнеров, которые включают:

• Богатый контент, такой как заголовки, ссылки, таблицы
• Вложенные объекты VML, например, кнопки, теги рабочего процесса — как я уже говорил в статье о закругленных кнопках, вложенные объекты VML на самом деле не поддерживаются Outlook

Кроме того, заставить объект VML, содержащий такое содержимое, вести себя аналогично элементам DIV , очень сложно.

Когда вы начинаете гуглить, вы можете найти различные решения:

• v:textbox с style="mso-fit-shape-to-text:true" , который увеличивает высоту объекта до размера, необходимого для его содержимого.
• v:rect / v:roundrect с style="mso-width-percent:1000;" , который не работал у меня в Outlook 2016, как предполагалось в статьях об этом. Либо что-то изменилось, либо я упустил какую-то часть головоломки.

Однако, что бы я ни пытался, мне не удалось успешно применить все эти функции одновременно. Что-то постоянно не получалось.

И, наконец, скругленные углы в v:roundrect определяются в процентах от размера контейнера, так что даже если вы зададите его каким-то кажущимся осмысленным способом, при изменении размера контейнера углы искажаются из-за масштабирования.

Что не сработало

Позвольте мне показать вам лучшее, что я мог получить при таком подходе. Я упростил его, чтобы дать вам лучшее представление:

 
  
        
1
2
3
4
5
6
        [КОД КНОПКИ]
        
A
B
C
D
E
F
    
 

В этом примере используется:

• v:roundrect контейнер с фиксированной шириной 568px , так как я не смог заставить mso-width-percent правильно работать, чтобы расширить объект до 100% ширины.
• Ранее рабочий код кнопки из статьи про закругленные кнопки.
• v:textbox контейнер содержимого с mso-fit-shape-to-text:true для обеспечения автоматической высоты контейнера.
• Содержимого достаточно для создания большей высоты, чем ширина контейнера.
• arcsize="3%" , что примерно соответствует 16px/568px , так как желаемый радиус границы равен 16px .

Это дает следующий результат:

Как видите, закругленные углы вполне соответствуют нашим ожиданиям, но кнопка полностью сломана. Это связано с тем, что вложение объектов VML не поддерживается. Объекты отображаются, но их опорная система позиционирования находится над контейнером. Это делает вложенный VML совершенно непригодным для наших сценариев.

Более того, если мы посмотрим на определение элемента roundrect, свойство arcsize говорит следующее: «Определяет закругленные углы в процентах от половины меньшего размера прямоугольника ».

Это означает, что если содержимого недостаточно, а контейнер короче заданной ширины, наши закругленные углы уменьшаются.

Смешанное решение, которое работает

Чтобы найти реальное решение, которое работает для общего контейнера, вам нужно немного выйти за рамки и оставить представление о контейнере как о едином объекте.

Позвольте мне обобщить некоторые факты, на которых мы будем основываться:

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

Помните макет таблицы 3×3 с фиксированными размерами ячеек по периметру из предыдущей статьи? Настало время использовать его и расширить для наших нужд.

Наш контейнер для тела имеет заполнение 24px и радиус границы 16px .

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

План следующий:

• Каждая из угловых ячеек будет содержать дугу, имитирующую определенный радиус границы как для фона, так и для границы.
• Остальные ячейки периметра являются стандартными ячейками, которые заполняют пустое пространство между углами и при необходимости обеспечивают соответствующую боковую границу.
• Заполнение ячейки содержимого уменьшено на размер радиуса границы, чтобы обеспечить правильное полное заполнение контейнера.

Поскольку объекты VML поддерживаются только Outlook, для других почтовых клиентов также будут стандартные радиусы границ и границы в угловых ячейках.

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

Изготовление углов

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

Используете элемент дуги для дуги?

Кажется, это очевидный выбор. VML предлагает элемент дуги, но он ведет себя не так, как вы могли ожидать. Это тестовый код, который я использовал, я поместил его в простой табличный контейнер без отступов из статьи о интервалах, чтобы лучше продемонстрировать, как это работает:

Это дает нам следующий результат:

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

Элемент формы, чтобы спасти положение!

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

Я придумал следующий код верхнего левого угла с фоном:

Подобно SVG, фигура VML имеет окно просмотра, определяющее локальную систему координат с атрибутами coordorigin и coordsize . Я использую окно просмотра 2×2, так как мне нужно разместить несколько точек точно на половине стороны ограничивающего квадрата.

Мой путь всегда следующий:

1. Начиная с конца дуги против часовой стрелки.
2. Кривая Безье до конца дуги по часовой стрелке со средними точками в середине соответствующих сторон. Это делает четверть круга (фактическая дуга).
3. Линия к центру круга.
4. И, наконец, замыкание фигуры, образующей линию до ее начала.

Это его вывод, который делает именно то, что нам нужно:

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

 Со следующим выводом:

Угол для стандартного почтового клиента

Я обсуждал углы VML, но они применимы только к Outlook. Для других почтовых клиентов нам нужно придерживаться стандартного подхода с использованием свойств CSS.

Имея в виду тот же макет, мы просто применяем их к каждой ячейке по отдельности. Вот пример такой угловой ячейки: 

Это дает тот же результат в стандартном почтовом клиенте, что и угол VML в Outlook. Нам нужно будет объединить их, чтобы получить стабильный результат, но я вернусь к этому через несколько минут.

Создание полного контейнера

Теперь давайте посмотрим, как мы можем применить эти элементы для создания полного контейнера.

Контейнер только с рамкой

Чтобы использовать закругленную рамку, нам нужно предоставить два варианта в теле письма. Один с объектом VML и один для других клиентов.

Для стандартных почтовых клиентов потребуется набор border и border-radius , но поскольку Outlook не поддерживает border-radius , в Outlook возникнет острый угол. Вот почему нам нужно добавить дополнительное условие, чтобы использовать одно или другое. Мы будем использовать отрицательное условие для почтовых клиентов, отличных от Outlook, из моей первой статьи.

Вот полный код контейнера только для границ с закругленными углами 16px и общим внутренним отступом 24px :

 
    <тело>
        
            <тд>
            
            
<тд>

            <тд>
            
<тд>

<тд>
[СОДЕРЖАНИЕ]


            <тд>
            <тд>
            
            
<тд>

            <тд>
            
 Со следующим результатом:
 Это прекрасно работает в стандартных почтовых клиентах, но есть одна маленькая загвоздка, которую вы можете заметить в Outlook.
 Он не точно позиционирует фигуру и оставляет небольшое пространство между углами и соседними ячейками. Вам нужно будет немного компенсировать это, но я пока оставлю это и вернусь к этому в окончательном решении.
 Контейнер только для фона 
 Давайте посмотрим, что произойдет, если мы применим те же принципы к контейнеру только для фона. Контейнер только для фона работает точно так же, только имеет немного другую форму и  свойство background-color  в ячейках таблицы вместо свойства границы CSS.
 Вот полный код контейнера только для фона с  16px  закругленными углами и общим внутренним отступом  24px  :
 

    <тело>
        
            <тд>
            
            <тд>
            
            <тд>
            
            <тд>
            <тд>
                [СОДЕРЖАНИЕ]
            
            <тд>
            <тд>
            
            
            <тд>
            
            <тд>
            
 Пробуя его, я намеренно сохранил исходный контент электронной почты, чтобы вы могли видеть, насколько хорошо он поддерживает расширенный контент даже с объектами VML:
 Как и в предыдущем решении только для границ, формы немного не те. Мы также компенсируем их через несколько минут.
 Полное решение с рамкой и фоном 
 Осталось решить две проблемы:
 Компенсация дополнительного места в Outlook.
 Разрешить контейнер с закругленными углами, имеющими границу и фон, что означает, по сути, использование двух фигур VML в одном месте. Это звучит знакомо?
 Мы уже знаем решение для последнего. Мы обсуждали это в статье о кнопках, где мы разместили кнопку над другим объектом VML, имитирующим тень.
 Решение для обеих проблем  position: relative  .
 Итак, я поместил как фон, так и границы (в этом порядке) в каждую из угловых ячеек и расположил их относительно с небольшой корректировкой  0,5px  в их позициях.
 Вот окончательный код  контейнера с поддержкой как фона, так и границы  . Я добавил дополнительную красную рамку к контейнеру body только для примера:
 

    <тело>
        
            <тд>
            
            
<тд>

            <тд>
            
<тд>

<тд>
[СОДЕРЖАНИЕ]


<тд>
            <тд>
            
            
<тд>

            <тд>
            
 Это его окончательный вывод в Outlook:
 Решение не идеально с резкими цветами, но оно настолько хорошо, насколько это возможно с Outlook. С более мягкими цветами он смешивается, а мелкие проблемы едва заметны.
 Этот окончательный код  поддерживает все комбинации , показанные в этой статье. Если вам нужен только фон или рамка, просто удалите соответствующую форму и CSS. Я продемонстрировал и то, и другое, чтобы показать вам, что нужно иметь в виду при разработке подобного решения.
 Вот как выглядит наше стандартное тело письма, используя только фон:
 И вот как мы используем то же самое с рамкой и фоном вместе. Это исходит из реального уведомления по электронной почте, отправленного моим коллегой при просмотре одной из этих статей:
 Другие возможные, но неэффективные решения 
 Были и другие потенциальные решения, которые я рассматривал, но ни одно из них не было «правильным» или не обеспечивало желаемого результаты:
 Попиксельная компоновка 
 Представьте себе таблицу, в которой каждый шаг представлен одним пикселем. Правильно организуя их и назначая ячейкам правильные цвета, вы в основном визуализируете растровое изображение с использованием элементов HTML.
 Это работает, однако ощущения такие же, как при рисовании Моны Лизы в Excel. Не то, что я бы посчитал эффективным решением.
 Но если вы хотите узнать больше об этой попиксельной компоновке, прочтите эту статью.
 Изображения углов 
 Вы можете использовать тот же подход, который я использовал с объектами VML в углах, но на этот раз с изображениями. Это не только ограничивает комбинации, которые мы можем использовать для изображений, которые вы готовите заранее, но также имеет ограничения, которые я описал в статье об основах электронной почты.
 Это все, что я хотел сказать 
 Спасибо, что были со мной до самого конца! Надеюсь, мои выводы были вам полезны и помогут вам в развитии вашей электронной почты. Если вы хотите обсудить свои решения или поделиться своим опытом, присоединяйтесь к нашему Discord.
 Если вы пропустили некоторые темы, вот ссылки на все мои предыдущие статьи о редизайне электронных писем:
 Внедрение электронных писем в 2021 году: основы и способы тестирования сгенерированных электронных писем
 Реализация электронной почты в 2021 году: закругленные кнопки с тенью, которые работают в Outlook    
 Внедрение электронной почты в 2021 году: как создавать встроенные теги с вертикальным выравниванием, которые работают в Outlook
 Внедрение электронной почты в 2021 году: особенности Outlook для интервалов и вертикального выравнивания в таблицах
  Внедрение электронной почты в 2021 году: как добавить закругленные углы к контейнерам в Outlook 
 Приятного времяпрепровождения!
 Автор:
 Мартин Хейтманек 
 Знание продуктов Kontent. ai насквозь. Убедившись, что они работают так, как задумано, и рассчитаны на будущее. Архитектура Kontent.ai — мой хлеб насущный.
 Другие статьи от Мартина
 Как создать элемент Div со скругленными углами в HTML CSS · Практика для разработчиков 
 Вы можете добавить закругленные углы ко всем четырем углам элемента div, используя свойство CSS  border-radius .
 Начните с создания вашего div.
  Код HTML 
 <дел>
  
Div со скругленными углами
  

    Фиктивный контент, который будет храниться в этом разделе.
    Фиктивный контент, который будет храниться в этом разделе.
    Фиктивный контент, который будет храниться в этом разделе.
  

 
  Код CSS 
 раздел {
  отступ: 100 пикселей;
  цвет фона: #ddd;
}
 
  Результаты 
 Div с закругленными углами
 Фиктивный контент, который будет храниться в этом разделе.
 Фиктивный контент, который будет храниться в этом разделе. Фиктивный контент, который будет храниться в этом разделе.
 Затем добавьте радиус границы.
 .закругленные углы {
  радиус границы: 5px;
}
 
  Результаты 
 Div с закругленными углами
 Фиктивный контент, который будет храниться в этом разделе.
 Фиктивный контент, который будет храниться в этом разделе.
 Фиктивный контент, который будет храниться в этом разделе.
 Вы также можете создать один, два или три скругленных угла div.
 Один круглый угол Div 
  Верхний левый угол 
 раздел {
  радиус границы: 10px 0 0 0;
}
 
 или
 раздел {
  граница-верхний-левый-радиус: 10px;
}
 
  Результаты 
 Div с закругленными углами
 Фиктивный контент, который будет храниться в этом разделе.
 Фиктивный контент, который будет храниться в этом разделе.
 Фиктивный контент, который будет храниться в этом разделе.
  Верхний правый угол 
 раздел {
  радиус границы: 0 10px 0 0;
}
 
 или
 раздел {
  граница-верхний-правый-радиус: 10px;
}
 
  Результаты 
 Div с закругленными углами
 Фиктивный контент, который будет храниться в этом разделе.
 Фиктивный контент, который будет храниться в этом разделе.
 Фиктивный контент, который будет храниться в этом разделе.
  Нижний левый угол 
 раздел {
  радиус границы: 0 0 10px 0;
}
 
 или
 раздел {
  радиус нижнего левого края: 10 пикселей;
}
 
  Результаты 
 Div с закругленными углами
 Фиктивный контент, который будет храниться в этом разделе.
 Фиктивный контент, который будет храниться в этом разделе.
 Фиктивный контент, который будет храниться в этом разделе.
  Нижний правый угол 
 раздел {
  радиус границы: 0 0 0 10 пикселей;
}
 
 или
 раздел {
  граница-нижний-правый-радиус: 10px;
}
 
  Результаты 
 Div с закругленными углами
 Фиктивный контент, который будет храниться в этом разделе. Фиктивный контент, который будет храниться в этом разделе.
 Фиктивный контент, который будет храниться в этом разделе.
 Два круглых угла Div 
 Вы можете создать элемент div с двумя скругленными углами, нацелив соответствующие углы с помощью свойств радиуса границы.
  Пример 
 раздел {
  радиус границы: 10px 0;
}
 
  Результаты 
 Div с закругленными углами
 Фиктивный контент, который будет храниться в этом разделе.
 Фиктивный контент, который будет храниться в этом разделе.
 Фиктивный контент, который будет храниться в этом разделе.
 Три круглых угла Div 
 Вы также можете создать div с тремя закругленными углами.
  Пример 
 раздел {
  радиус границы: 10px 10px 10px 0;
}
 
  Результаты 
 Div с закругленными углами
 Фиктивный контент, который будет храниться в этом разделе.
Добавить комментарий Отменить ответ
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Комментарий *
Имя * 
Email * 
Сайт