Как вставить в рамку текст

Для размещения в прямоугольнике текста необходимо в блок CSS добавить атрибут отступов текста от краёв padding, а  HTML-тег будет содержать в себе нужный текст, например “pib9.ru”. Таким образом блок CSS имеет такой вид:

#ugolkrug{
 width:200px; /* Длина фигуры */
 height:100px; /* Высота фигуры */
 color: #0000; /* цвет текста */
 background:#FF7F00; /* фон блока */
 border: 3px #CCCCCC solid; /* стили рамки */
 -moz-border-radius: 10px; /* закругление для старых Mozilla Firefox */
 -webkit-border-radius: 10px; /* закругление для старых Chrome и Safari */
 -khtml-border-radius:10px; /* закругление для браузера Konquerer системы Linux */
 border-radius: 10px; /* закругление углов для всех, кто понимает */
 padding: 5px; /* внутренние отступы */
}

а HTML-тег для выдачи текста будет выглядеть так:

<div id="ugolkrug">pib9.ru</div>

В этом случае формы принимают размеры среды: длина соответствует ширине поля, а высота изменяется по мере наполнения формы содержимым.

Закругление выбранных углов

В описании стилей параметр 10px в атрибуте border-radius показывает радиус закругления, который можно изменять, подбирая нужный. Если задать 0, то закругление не произойдет. Этим свойством можно воспользоваться, когда необходимо сделать закругление выбранных углов.

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

#ugolkrug{
 width:200px; /* Длина фигуры */
 height:100px; /* Высота фигуры */
 color: #0000; /* цвет текста */
 background:#FF7F00; /* фон блока */
 border: 3px #CCCCCC solid; /* стили рамки */
 -moz-border-radius: 10px 10px 0 0; /* закругление для старых Mozilla Firefox */
 -webkit-border-radius: 10px 10px 0 0; /* закругление для старых Chrome и Safari */
 -khtml-border-radius: 10px 10px 0 0; /* закругление для браузера Konquerer ОС Linux */
 border-radius: 10px 10px 0 0; /* закругление углов для всех, кто понимает */
 padding: 5px; /* внутренние отступы */
}

Отсчет углов ведется по часовой стрелке, начиная с левого верхнего угла:

2. Закругление углов с помощью HTML кода без записи в файл стилей

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

HTML закругленные углы

Есть одна небольшая фишка, которая ещё больше упрощает весь процесс – это HTML закругленные углы. Она заключается в формировании HTML кода, в котором прописываются те же стили, что и в кодах CSS. При этом используются те же атрибуты, что и в блоке CSS и отпадает необходимость записи блока в файл Style.css. Одним словом – заменяем полностью кодом HTML код CSS.

Вместо нашего блока CSS получаем HTML скрипт, который вставляем в то место, где должен выдаваться прямоугольник с закругленными углами:

<div style="width: 320px; height: 160px; color: #0000; background: #FF7F00; border: 3px #CCCCCC solid; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml- border-radius: 10px; border-radius: 10px; padding: 5px;">Закругленные углы с помощью HTML без использования файла Style.css</div>

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

3. Картинки с закругленными углами. Рамка вокруг картинки HTML

Ещё хочу подарить Вам полезную информацию. Часто, используя картинки для оформления сайта, очень хочется сделать их ещё красивее, изменяя их форму, обрамляя рамкой красивого цвета и различной ширины. При этом возникает вопрос: “Как закруглить углы картинки?”.

Это делается очень просто, и сейчас мы этому научимся.

Расположим картинку на сайте, сделав её фоном для самой себя в качестве фона тега div. Получаем такой код и картинку:

<div style="background: url('http://pib9.ru//var/www/clients/client2/web5/web/wp-content/uploads/2012/07/kak-vstavit-kartinku-na-sajt.jpg'); width: 307px; height: 230px;" title="Как вставить картинку на сайт" alt="Как вставить картинку на сайт"></div>

В атрибуте url(‘ ‘) вставляете ссылку на свою картинку.

Закругляем углы картинки с добавлением рамки

Закругление углов картинок в CSS и HTML и добавление рамки можно выполнить одним из двух способов, описанных выше.

Используя первый способ данной статьи, коды картинок для файла стилей и тега div HTML-кода будут выглядеть следующим образом:

#img-radius {
 border:3px solid #85A0C9;
 border-radius: 30px;
 -webkit-border-radius: 30px;
 -moz-border-radius: 30px;
}

<div id="img-radius" style="background: url('Ссылка на картинку'); width: 307px; height: 230px;" title="Картинки с закругленными углами" alt="Картинки с закругленными углами"></div>

Обратите внимание, что часть атрибутов можно заносить в файл стилей, а часть в тег div. В нашем случае размеры картинки width и height вставлены в HTML-код.

Код HTML второго способа без использования файла стилей, описанного в данной статье,  имеет такой вид:

<div style="background: url('Ссылка на картинку'); width: 307px; height: 230px; border: 3px solid #85A0C9; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;" title="Картинки с закругленными углами" alt="Картинки с закругленными углами"></div>

В результате работы кодов каждого из двух способов получаем один и тот же результат – картинку с закругленными углами: