logo

Свойство border-radius

В CSS3 появилось замечательное свойство border-radius. Это свойство позволяет задать для элемента скругление углов. Ранее для этого использовались картинки ( сколько трудов стоило вырезать каждый скругленный уголок из шаблона, а затем «распихивать» их по нужным местам при верстке).

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

border-radius:
10px;

border-radius:
10px 20px;

border-radius:
40px 30px 20px 10px;

border-radius:
0 20px;

border-radius:
10px 100px

При значении border-radius:50%; квадрат приобретает форму круга, а прямоугольник — овала.
Тот же результат дает применение половинчатых значений высоты и ширины, т.е при стороне квадрата в 100рх border-radius:50px; дает круг.

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

border-radius:
50%;

border-radius:
50%;

border-radius:
90%/100%;

border-radius:
50px/40px;

При отсутствии рамки «скругляется» фоновое изображение (смотри предпоследний пример).
Мы можем добавить в стилях к элементу рамку, тень , рисунок и они будет повторять контур заданного скругления.

Фотогалерея «весна пришла»

Очень громкое название для 4 картинок, но зато овальные и с тенью.

Весна на дачеВесна на дачеВесна на дачеВесна на даче

.br_img {
    margin: 10px 25px;
    border:none;
    border-radius: 50%;
    box-shadow:3px 3px 13px #1B5F11;
}  

Самое простое меню


<div class="br_menu">
  <a href="#" class="br_menu-link" title="Главная">Главная</a>
  <a href="#" class="br_menu-link" title="Советы">Советы</a>
  <a href="#" class="br_menu-link" title="Проект">Проект</a>
  <a href="#" class="br_menu-link" title="Контакты">Контакты</a>
</div>
.br_menu{
    width:250px;
    height:  200px;
    background: #D5E9ED;
    border-radius: 10px;
    border: 2px solid #999;
    padding-top: 5px;
    margin: 10px 0;
}    
.br_menu-link{
     width:230px;
     display:block;
     border-radius:30px;
    margin: 7px;
     border:#ccc 4px double;
     font-size:18px;
     color:#888;
     line-height:30px;
     text-shadow:0 1px 0 #fff;
     text-decoration:none;
     text-align:center;
     background:#ddd
}
.br_menu-link:hover{
     border:#bbb 4px double;
     color:#aaa;
     text-decoration:none;
     background:#e6e6e6
 }

Полукруг и четвертушка

Очень простой код и несколько строк в таблице стилей — в результате 2 фигурки. Не нужно никаких изображений, которые «весят», в лучшем случае несколько сот килобайт. А код, пожалуй, и килобайта не наберется. Вот такая разница и экономия.


<div class="circle1_2"></div>
<div class="circle1_4"></div>
.circle1_2{
    background: #6DA3ED;
    height: 50px;
    width: 100px;
    border-radius: 100px 100px 0 0;
 }
.circle1_4 {
    background: #E34;
    height: 100px;
    width: 100px;
    border-radius:0  0 100px  0;
}

Навеяло…

…а может просто «что-то не то с фантазией»


<div class="bg_circle">
    <div class="circle"></div> 
    <div class="circle_1"></div>
    <div class="circle_2"></div>
    <div class="circle_3"></div> 
</div>
.bg_circle {
    position: relative;
    width: 200px;
    height: 200px;
    margin-bottom: 10px; 
}
.circle{
    position: absolute;
    left: 0;
    top: 0;
    background: #E4A7E8;
    height: 100px;
    width: 100px;
    border-radius: 100px 0 0 0;
    box-shadow: 3px -3px 6px #999;
 }
.circle_1{
    position: absolute;
    right:-3px;
    top: 0;
    background: #E4A;
    height: 50px;
    width: 50px;
    border-radius:50%;
    margin:45px;
    box-shadow: 3px -3px 6px #999;
 }  
.circle_3{
     position: absolute;
     left: 102px;
     bottom: -4px;
     background: #E34;
     height: 100px;
     width: 100px;
     border-radius:0  0 100px  0;
     box-shadow: 3px -3px 6px #999;
 }
 .circle_2{
     position: absolute;
     right: 100px;
     bottom:-4px;
     background: #0f0;
     height: 100px;
     width: 100px;
     border-radius:0 0 0 100px;
     box-shadow: 3px -3px 6px #999;
 }

И это далеко не все возможности свойства border-radius.


Элементы CSS 0

Рекомендую прочитать...

Трансформации для блока анонсов
блок анонсов

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

Читать полностью
Как изменить цвет изображения
как изменить цвет изображения

Как! Во многих интернет магазинах присутствует такая штука: цвет товара меняет свой цвет. Т.е. при клике на один из представленных цветов товар, как правило, это одежда, автомашина, чехлы для телефона или сам телефон меняет свою цветовую окраску. Со стороны кажется, что товар как бы заливается выбранным цветом, или приобретает тот орнамент ( часто представлены при […]

Читать полностью
Псевдоэлементы ::before и ::after
Псевдоэлементы

Из самого наименования предполагаем, что это вроде не настоящий элемент для верстки, а как бы подделка. Но эта «подделка» дорогого стоит.

Псевдоэлементы ::before и ::after ничего не изменяют в HTML-документе, их не существует и в дереве элементов документа.

Эти псевдоэлементы позволяют вставить на странице ту информацию, которой нет в HTML-коде.

Читать полностью

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.