Создайте закругленную рамку с помощью CSS

Затем мы создадим страницу xHTML, которая содержит две области контента, содержащиеся в DIV с идентификаторами fixBox и FlowBox. Это два DIV с фиксированной и нефиксированной шириной. Теперь мы создадим страницу для этих двух DIV с закругленными углами. .

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

Добавление закругленных углов в коробку фиксированного размера. Шаг 1. Создайте базовый документ xHTML и добавьте в него немного содержимого.
просмотреть обычную копию в буфер обмена, распечатать?

просмотреть обычную копию в буфер обмена, распечатать?
тело, HTML {
маржа: 0;
дополнение: 0;
фон: #a7a09a;
цвет:#000;
}

тело, HTML {
маржа: 0;
дополнение: 0;
фон: #a7a09a;
цвет:#000;
}Шаг 2. Установите ширину и цвет фона DIV.
просмотреть обычную копию в буфер обмена, распечатать?
div#fixedBox {
ширина: 340 пикселей;
поле: 40 пикселей;
фон:#E4ECF9;
}

div#fixedBox {
ширина: 340 пикселей;
поле: 40 пикселей;
фон:#E4ECF9;
}Шаг 3. Создайте скругленный прямоугольник на основе ширины DIV. Поскольку я установил ширину DIV на 340 пикселей, теперь мне нужно создать скругленный прямоугольник шириной 340 пикселей. После создания прямоугольника поместите верхнюю часть. Из всего прямоугольника нижняя часть была вырезана и использована в качестве изображения DIV. Я сделал следующие две картинки:

Шаг 4. Примените изображение к фону DIV.
просмотреть обычную копию в буфер обмена, распечатать?
div#fixedBox {
ширина: 340 пикселей;
поле: 40 пикселей;
фон:#E4ECF9 url(images/bottom.gif) без повтора внизу по центру;
}

div#fixedBox {
ширина: 340 пикселей;
поле: 40 пикселей;
фон:#E4ECF9 url(images/bottom.gif) без повтора внизу по центру;
}div#fixedBox h2{
маржа: 0;
отступ: 2 пикселя;
фон:#E4ECF9 url(images/top.gif) без повтора вверху по центру;
}

Выше мы применяем изображение с именем Bottom.gif внизу DIV, а затем используем Top.gif к первому элементу H2 DIV. Конечно, первое, на что нам нужно обратить внимание, это то, что мы не можем добавлять. Укажите значение h2 или добавьте отступ или границу в DIV.

Создайте закругленный блок нефиксированной ширины. Выше мы говорили о создании закругленного блока фиксированной ширины, но не фиксированной высоты. Для этого требуется два изображения, верхнее и нижнее. Итак, теперь, если мы не зафиксируем ширину и высоту. , подумайте об этом на мгновение. Вы обнаружите, что на этот раз нам придется использовать 4 изображения, по одному в каждом углу, чтобы создать скругленный прямоугольник, который можно сжать любым способом. Нам все еще нужно сначала создать DIV-контейнер. добавить основной контент.

Шаг 1. Создайте документ xHTML.
просмотреть обычную копию в буфер обмена, распечатать?

Второй шаг — создать закругленные углы. Создайте четыре закругленных угла. Закругленные углы расположены в верхнем левом, нижнем левом, верхнем правом и нижнем правом направлениях. Я сделал следующие закругленные углы.

Шаг 3. Установите цвет фона простой копии DIVview

в буфер обмена?
div#flowBox {
поле: 40 пикселей;
фон: # C3D9FF;
}

div#flowBox {
поле: 40 пикселей;
фон: # C3D9FF;
} Шаг 5. Добавьте закругленные углы

. Для контейнеров DIV без фиксированной ширины и высоты любой закругленный угол должен иметь возможность менять свое положение в соответствии с изменениями ширины и высоты DIV, поэтому мы можем добавлять закругленные углы только к фиксированным. -width DIV. Используемые здесь изображения фиксированной ширины преобразуются в два небольших изображения и могут быть добавлены непосредственно к элементу H2. Теперь после добавления элемента H2 мы получаем только одну сторону закругленного угла, и она еще есть. получается один закругленный угол, который можно использовать в H2. Span, так что решаются два закругленных угла, и элемент p может обеспечить один закругленный угол, а сам элемент div имеет один закругленный угол, что составляет ровно четыре закругленных угла.

просмотреть обычную копию в буфер обмена, распечатать?
div#flowBox {
поле: 40 пикселей;
фон:#C3D9FF url(images/bottom-left.gif) без повтора внизу слева;
}

div#flowBox h2{
маржа: 0;
дополнение: 0;
фон:#C3D9FF url(images/top-left.gif) без повтора вверху слева;
}

div#flowBox h2 span{
маржа: 0;
дисплей: блок;
фон:#C3D9FF url(images/top-right.gif) без повтора вверху справа;
}

div#flowBox p{
маржа: 0;
дополнение: 0;
фон:#C3D9FF url(images/bottom-right.gif) без повтора внизу справа;
}