Затем мы создадим страницу xHTML, которая содержит две области контента, содержащиеся в DIV с идентификаторами fixBox и FlowBox. Это два DIV с фиксированной и нефиксированной шириной. Теперь мы создадим страницу для этих двух DIV с закругленными углами. .
Теория, которую мы используем, заключается в том, что при добавлении фона к элементу фоновое изображение всегда появляется поверх цвета фона. Чтобы создать сплошной цветной прямоугольник с закругленными углами, мы можем сначала создать обычный прямоугольник, а затем использовать изображение с закругленными углами; того же цвета, что и фон с четырьмя закругленными углами этого элемента, чтобы сформировать рамку с закругленными углами. Этот метод будет подробно описан ниже в двух случаях: ящики фиксированного размера и потоковые ящики нефиксированного размера.
Добавление закругленных углов в коробку фиксированного размера. Шаг 1. Создайте базовый документ xHTML и добавьте в него немного содержимого.
просмотреть обычную копию в буфер обмена, распечатать?
<div id="fixedBox">
<h2>Тестирование FixedBox</h2>
<p>Это всего лишь тестовая страница enpor.com.</p>
</div>
<div id="fixedBox">
<h2>Тестирование FixedBox</h2>
<p>Это всего лишь тестовая страница enpor.com.</p>
</div>Теперь мы создали документ xHTML, который имеет DIV с идентификатором fixBox. Мы создадим закругленную рамку для этого DIV. Затем добавьте базовый стиль к документу:
просмотреть обычную копию в буфер обмена, распечатать?
тело, 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.
просмотреть обычную копию в буфер обмена, распечатать?
<div id="flowBox">
<div class="forhelp">
<div class="forhelp2">
<h2>Тестирование FlowBox</h2>
<p>Это всего лишь тестовая страница enpor.com.</p>
</div>
</div>
</div>
<div id="flowBox">
<div class="forhelp">
<div class="forhelp2">
<h2>Тестирование FlowBox</h2>
<p>Это всего лишь тестовая страница enpor.com.</p>
</div>
</div>
</div>Я добавил приведенные выше четыре строки непосредственно в предыдущий HTML-документ, поэтому мне больше не нужно устанавливать таблицу стилей CSS для его тела. Теперь мы перейдем непосредственно к теме.
Второй шаг — создать закругленные углы. Создайте четыре закругленных угла. Закругленные углы расположены в верхнем левом, нижнем левом, верхнем правом и нижнем правом направлениях. Я сделал следующие закругленные углы.
Шаг 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) без повтора внизу справа;
}