Оформление блока div рамкой с закругленными углами и тенью
galina2601 14-01-2014, 16:41 17 565 Уроки по CSSДля выделения какого-либо фрагмента текста на странице можно воспользоваться стилевыми свойствами CSS3. На данный момент практически все браузеры поддерживают свойства border-radius (скругление углов) и box-shadow создание тени.
Вот пример блока с тенью, но без скругления углов |
Вот пример блока со скругленными углами |
Итак, нам нужно создать блок, содержащий текст и картинку. Этот блок будет выделен рамкой со скругленными углами и тенью.
Блоку дадим имя, то есть присвоим какой-либо идентификатор.
<div class="ramka">
<p>Текст внутри блока</p>
<img src="1.gif" title="картинка внутри блока">
</div>
В таблицу стилей дописываем следующее описание:
Текст внутри блока
Кстати, можно с помощью стилей добавить дополнительный эффект при наведении на блок курсора мышки. Для этого при описании стилей блока нужно добавить внизу еще одну строку.
.ramka:hover{border:4px solid #f77;}
То есть при наведении на блок курсора меняется цвет рамки.