Предисловие: В своей статье «Полуидеальное решение для сверхгладкой рамы с закругленными углами» я обобщил семь различных решений для коробок с закругленными углами, которые в основном суммируют популярные решения по реализации коробок с закругленными углами в Интернете. А в другой моей статье «Угол пика без изображения» — еще один альтернативный способ реализации.
Реализация закругленных углов с помощью чистого CSS — это явление, которое все считают плохим. Я также написал две обзорные статьи. Почему все еще существует эта статья? В наших предыдущих проектах реализация закругленных углов часто достигалась с помощью фоновых изображений. Однако, когда эти проекты публиковались в сети, в процессе сопровождения иногда приходилось добавлять некоторые новые требования, поскольку они широко использовались в предыдущих проектах. используются угловые изображения, и все эти изображения объединяются с помощью спрайтов CSS. Чтобы не добавлять дополнительную работу, а также не хотите использовать JS для добавления дополнительных http-запросов, для решения этого вопроса необходимы некоторые простые решения CSS. Что касается моих личных предпочтений, мне также нравится использовать подход без изображений для обработки этих эффектов. Я всегда чувствую, что CSS может выполнить эту работу, почему бы не позволить этому сделать?
Принцип реализации :
Принцип реализации блока с закругленными углами с использованием чистого CSS был подробно объяснен многими людьми в Интернете. На диаграмме ниже показан эффект после увеличения одного из закругленных углов.
На изображениях выше мы видим, что этот закругленный прямоугольник на самом деле состоит из контейнеров. Каждый контейнер имеет разную ширину. Эта ширина достигается за счет полей, например: поля слева. Правая сторона — 5 пикселей, а сверху вниз — 5 строк. Поля — 5 пикселей, 3 пикселя, 2 пикселя и 1 пиксель, уменьшающиеся по порядку. Таким образом, основываясь на этом принципе, мы можем реализовать простую структуру и стиль HTML.
1. Слой структуры HTML:
<div class="sharp color1">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="content">Текстовое содержимое</div>
</div>
<b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>
</div>
b1~b4 представляют собой две конструкции с закругленными углами слева и справа, а b5~b8 образуют две структуры с закругленными углами слева и справа внизу. Контент — это основная часть контента. Поместите все это в большой контейнер и присвойте ему четкое имя класса, чтобы задать общий стиль. Затем на него накладывается имя класса color1. Это имя класса используется для различения разных цветовых схем, поскольку могут быть закругленные углы разных цветов.