Здравствуйте Гость!


Запомнить.
Авто. вход.
Забыли пароль?
Регистрация

ПОДПИСКА Подписавшись по E-mail, Вы будете получать уведомления о новых статьях к себе на почту.
Подписатся на почтовую рассылку на сайте astranar.ru
Подписаться



ДОБАВЛЯЙТЕСЬ В ДРУЗЬЯ Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте на стене моего аккаунта.
Мой аккаунт Вконтакте
Мой аккаунт
Главная - CSS - Как сделать закруглённые углы через CSS


Как сделать закруглённые углы через CSS


Как сделать закруглённые углы через CSS

За округленные углы отвечает такой тег: 

border-radius: 10px 10px 10px 10px;


А для того чтобы установить цвет каждому закруглению, нужно применить такой тег: 

border-color: #4ECC3B #4EFF3B #4EFF3B #4ECC3B;


Для того чтобы сделать закругленные углы любой таблице или любой картинке на вашем сайте, вам нужно прописать каждому блоку таблице или картинке эти два атрибута.



Вот вам пример для ознакомления, меняйте стили, экспериментируйте,и у вас все получится.



CSS стиль для таблицы. 

.modal_fon{

    width: 125px; // Задаем ширину таблицы

    height: 25px; // Задаем высоту таблицы

    border-color: #4ECC3B #4EFF3B #4EFF3B #4ECC3B; // Задаем цвет каждому закруглению

    border-radius: 20px 20px 20px 20px; // Устанавливаем радиус закруглений в пикселях.

    cursor: pointer; // Устанавливаем курсор для этой таблицы

}

#smenu a:link, #smenu a:visited {

 margin:20px; // Устанавливаем отступы у посещенных ссылок

 font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif; // Устанавливаем шрифт у посещенных ссылок

 color:#blue; // Устанавливаем цвет посещенной ссылки

}

#smenu a:hover{

 margin:20px; // Устанавливаем отступы

 font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif; // Устанавливаем шрифт

 color:#green; // Текст ссылок

 text-decoration: none; // Скрываем мигающий текст

}


А это HTML код таблицы: 

<table id="smenu" class="modal_fon">

<tr><td><a href="statii?statia=budilniki">Год утренним звонкам «живого будильника»</a></td></tr>

<tr><td><a href="statii?statia=kalininskaya_pobeda">«Калининская Победа»</a></td></tr>

<tr><td><a href="statii?statia=Pogrebnichenko_yanmai">«В современном мире без музыки никуда…»</a></td></tr>

</table>



Надеюсь вам вам все понятно. Если остались вопросы задавайте, я отвечу.



Удачи вам.



Просмотров страницы: 2186
Урок добавлен: 11 Августа 2012

<<<Предыдущая статьяСледущая статья >>>

Копирование материалов разрешается только с указанием автора (Пальгов Олег) и индексируемой прямой ссылкой на сайт (https://astranar.ru/)!

Добавляйтесь ко мне в друзья ВКонтакте: https://vk.com/palgov_oleg. Если Вы хотите оценить меня и мою работу, то напишите на стене моего аккаунта ВКонтакте.

Если Вы не хотите пропустить новые материалы на сайте, то Вы можете подписаться на обновления:
Подписаться на обновления

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

Ещё статьи по css:
• Как установить курсор через CSS
• CSS атрибуты и значения, определяющие неподвижный фон
• Как сделать тени вокруг блока css
• Как изменить расстояние между строками текста?


Комментарии (3)

Владислав Малиничев 28 Августа 2012 в 15:31
http://beloweb.ru/dizayn-sayta/kak-sdelat-blok-s-zakruglennyimi-uglami-tolko-na-css.html напиши и сюда такую...ООООООООООООчень интересная статья!!!



Владислав Малиничев 28 Августа 2012 в 15:33
http://beloweb.ru/javascript-jquery/besplatnaya-podborka-vsplyivayushhih-podskazok-s-ispolzovaniem-jquery-i-css3.html Тоже очень полезные вещи



Владислав Малиничев 28 Августа 2012 в 23:43
Тут есть тени а у тя их нету...Просто тени сложно сделать новичку... напиши статью про это




Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Как сделать закруглённые углы через CSS
Кем бы ты ни был — будь лучше.

Авраам Линкольн

Вступайте в группу!