Закругляем углы рамки

РАССМОТРИМ такой КОД:

<div style="border: 5px solid #000fff; background-color: #f7f7f4; padding: 10px; text-align: center; background-position: initial initial; background-repeat: initial initial;"> ТЕКСТ ТЕКСТ ТЕКСТ </div>

Если вставить этот html-код в пост на сайте WordPress, то ПОЛУЧАЕМ вот такую рамку, у которой все углы - острые:

ТЕКСТ ТЕКСТ ТЕКСТ

Вставим в выше представленный код атрибут:

border-radius:10px;

При помощи этого атрибута закругляются все углы рамки, причем радиус можно изменять, получим
КОД:

<div style="border: 5px solid #000fff; border-radius: 10px; background-color: #f7f7f4; padding: 10px; text-align: center; background-position: initial initial; background-repeat: initial initial;">ТЕКСТ ТЕКСТ ТЕКСТ</div>

А рамка будет выглядеть вот так:

ТЕКСТ ТЕКСТ ТЕКСТ

Если в атрибуте указать ни одно, а четыре значения, то каждый угол можно закруглить по-разному или чередовать закругление углов.

НАПРИМЕР:

Рассмотрим атрибут

border-radius: 0 0 10px 10px;

Здесь указаны радиусы закругления углов в таком порядке:

border-radius: 0(верхний левый) 0(верхний правый) 10px(нижний правый) 10px(нижний левый).

Получим вот такой КОД:

<div style="border: 5px solid #000fff; border-radius: 0 0 10px 10px; background-color: #f7f7f4; padding: 10px; text-align: center; background-position: initial initial; background-repeat: initial initial;">ТЕКСТ ТЕКСТ ТЕКСТ</div>

У рамки будут закруглены только нижние углы:

ТЕКСТ ТЕКСТ ТЕКСТ

А теперь изменим атрибут иначе, например, так:

border-radius: 0 10px 0 10px;

Получим КОД:

<div style="border: 5px solid #000fff; border-radius: 10px 0 10px 0; background-color: #f7f7f4; padding: 10px; text-align: center; background-position: initial initial; background-repeat: initial initial;">ТЕКСТ ТЕКСТ ТЕКСТ</div>

А рамка будет выглядеть так:

ТЕКСТ ТЕКСТ ТЕКСТ

Теперь у рамки закруглены верхний левый и нижний правый углы.
Экспериментируйте с удовольствием!
Если вам хоть немного помогла эта статья, то нажмите на кнопки СОЦСЕТЕЙ - они перед комментариями. СПАСИБО!

А я желаю ВАМ успехов!
Пожелайте успехов и мне!


ПОДПИШИСЬ НА ОБНОВЛЕНИЯ.
УКАЖИ свой E-MAIL. 

komment



Об авторе Lyudmila Abramochkina

Математик, репетитор по математике, создаю сайты на движке WordPress, провожу курсы и тренинги для новичков по созданию сайтов на движке WordPress.
Закладка Постоянная ссылка.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.

Добавить изображение