Как закруглить углы в css – Скруглённые уголки | htmlbook.ru

31.01.2020 Facebook Twitter LinkedIn Google+ Разное

Содержание

свойство border-radius — учебник CSS

В предыдущем уроке мы изучили, как задать границу для элемента. Также были рассмотрены такие свойства как border-color и border-style, с помощью которых можно настраивать цвет и стиль границы. Однако все рамки у нас получались с прямыми углами. Теперь мы расскажем, каким образом можно сделать закругленные углы в CSS для границ.

Как закруглить углы: свойство CSS3 border-radius

Закругление углов в CSS можно сделать для любого элемента HTML-страницы. Для этого необходимо применить к нему свойство border-radius с соответствующим значением. Чаще всего значение указывается в пикселях, но можно также использовать и другие единицы, например, em или проценты (в последнем случае вычисление производится относительно ширины блока).

Эффект данного свойства будет заметен только при условии, что у стилизуемого элемента имеется цветной фон и/или граница. Например:


.borderElement {
  background-color: #EEDDFF;
  border: 6px solid #7922CC;
  border-radius: 25px;
}

Стиль, описанный выше, даст следующий результат на элементе <div> размером 200×200 пикселей:


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


.borderElement {
  background-color: #EEDDFF;
  border: 6px solid #7922CC;
  border-radius: 25px;
}

.borderElement1 {
  background-color: #FFE8DB;
  border: 6px solid #FF5A00;
  border-radius: 15px 100px 15px 100px;
}

Но и это еще не всё: вместо простых круглых углов можно задавать эллиптическое скругление. Для этого понадобится указать два значения, разделенные косой чертой (для горизонтальной и вертикальной полуосей эллипса). Приведем пример на блоке размером 150×450 пикселей:


.borderElement {
  background-color: #EEDDFF;
  border: 6px solid #7922CC;
  border-radius: 280px/100px;
}

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

  • border-top-left-radius — для верхнего левого угла;
  • border-top-right-radius — для верхнего правого угла;
  • border-bottom-left-radius — для нижнего левого угла;
  • border-bottom-right-radius — для нижнего правого угла.

Принцип скругления углов

На рисунке ниже показано, каким образом вычисляется скругление углов в CSS. Так, если для угла указано одно значение, — например, 20px, — это означает, что закругление будет происходить по окружности с радиусом 20 пикселей. В случае, когда задаются два значения через косую черту, например,

30px/20px, закругление углов будет происходить по эллипсу. Первое значение в таком случае является длиной горизонтальной полуоси эллипса — 30px, а второе — длиной вертикальной полуоси — 20px:


Свойство CSS border-radius поддерживается всеми современными версиями браузеров.

Далее в учебнике: свойство box-shadow — создаем тени для элементов.

idg.net.ua

Как закруглить углы изображения на CSS без Фотошопа — Технический блог

1 июня 2015  •  HTML & CSS  •  Коментарии: 1  •  Просмотры: 17556

Все современные браузеры поддерживают стандарты гипертекстовой разметки HTML5 и стили оформления CCS3. И если ваш сайт (шаблон) поддерживает современные стандарты, то вы можете вносить изменения в оформление, такое как скругление углов, тени, градиентная заливка, не прибегая к помощи графических редакторов.

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

Чтобы приведенные примеры в статье корректно отображались у вас на экране, вы должны использовать самые свежие версии браузеров, FireFox, Chrome и те что сделаны на основе их: Яндекс.Браузер, Амиго и так далее.

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

По стандарту CSS3 чтобы блок DIV имел скругленные углы, ему необходимо придать стиль border-radius, например так:

border-radius: 10px;

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

Блок с прямыми углами

Блок с закругленными углами

Закругление углов у картинок

По аналогии с примером выше можно закруглить углы и у картинок на сайте, например фотографий. Для наглядности закруглим углы для фотографии со страницы https://moonback.ru/page/shinomontazh

Вот изображение без CSS обработки

А теперь с загругленными углами:

border-radius: 10px;

Чтобы стало совсем «красиво» с начала добавим окантовку…

border-radius: 10px;
border: 5px #ccc solid;

а затем и тени:

border-radius: 10px;
border: 5px #ccc solid;
box-shadow: 0 0 10px #444;

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

border-radius: 10px;
box-shadow: 0 0 10px #444;

И напоследок полное издевательство над изображением

border-radius: 50%;
border: 5px #cfc solid;
box-shadow: 0 0 10px #444;

Если вы откроете изображении в новом окне, то увидите, что оно (изображение) в неизменном виде, а все углы, тени и так далее — всего лишь результат обработки

CSS стилей вашим браузером.

Маленькое лирическое отступление

Стиль border увеличивает размер изображения на величину окантовки. Если указано значение border: 5px, то итоговое изображение станет шире и выше на 10 пикселей. Учитывайте это, в некоторых случаях может «поехать» верстка сайта.

А стиль box-shadow не влияет на размер картинки, тень как бы наезжает на соседние элементы. При его использовании верстка сайта не страдает.

Как закруглить углы картинок на WordPress

Во всех приведенных примерах выше я прописывал стили прямо в тегах html кода. Например последний выглядит так:

<img src="http://moonback.ru/http://moonback.ru/http://moonback.ru/http://moonback.ru/http://moonback.ru/http://moonback.ru//wp/wp-content/uploads/2016/01/humor/humor01.jpg">

Это хорошо когда нужно переоформить одну картинку или фотографию. А если вы захотите изменить все? Ну не будете же вы лазить по всему своему сайту, чтобы подредактировать отображение каждой. В большинстве случаев WordPress тегу

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

Например для всех изображений, для который не указано выравнивание, в файле style.css вашей темы WordPress пропишите следующее:


.alignnone {
border-radius: 10px; 
border: 5px #cfc solid; 
box-shadow: 0 0 10px #444;
}

Либо самый жесткий метод для всех картиной на сайте. Переопределим стиль для всех тегов IMG:


img {
border-radius: 10px; 
border: 5px #cfc solid; 
box-shadow: 0 0 10px #444;
}

Последний вариант подойдет не только для WordPress, а для любой CMS. И даже для простой HTML странички в том случае когда при выводе изображений тегу IMG не присваеватся никаких классов стилей. Но будьте внимательны. Если вы переопределите параметры отображения тега

IMG вы измените внешний вид ВСЕХ картинок на сайте!

Вместо заключения

Все примеры в статье условные и призваны лишь продемонстрировать некоторые возможности CSS по обработки изображений и показать как это просто.

Поделись этой страницей с друзьями!

moonback.ru

Как закруглить углы в CSS

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

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

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

Поэтому сегодня мы будем учиться закруглять углы при помощи CSS!

Для примера вот у нас есть такая кнопка:

Код кнопки (HTML):

<input type="button" value="Сообщение!"/>

Код кнопки (CSS):


.knopka
{
color:#cc0000;
font-size:50px;
padding:10px;
background-color:#fff;
border:1px solid #999;
}

Чтобы закруглить углы, пропишите в CSS «border-radius»:

border-radius: 20px;

готовый код:


<html>
<head>
<title>Заголовок страницы</title>
<style>
.knopka
{
color:#cc0000;
font-size:50px;
padding:10px;
background-color:#fff;
border:1px solid #999;
border-radius: 20px;
}
</style>
</head>
<body>
<input type="button" value="блог BlogGood.ru"/>
</body>
</html>

Результат будет таким:

Как видите, закруглились четыре угла на 20 px.

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

border-radius: 20px 20px 0 0;

Начинаете с левого верхнего угла и по часовой.

В результате вы увидите:

Закруглилось два верхних угла.

Если по каким-то причинам закругление не происходит, есть вероятность того, что ваш браузер ну очень сильно постарел…

Чтобы избежать такого, добавьте border-radius под популярные браузеры:


-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Google Chrome */
-khtml-border-radius: 10px; /* KHTML */
-o-border-radius: 10px; /* Opera */
-ms-border-radius: 10px; /* IE8 */
-icab-border-radius: 10px; /* Icab */
border-radius: 10px; /* CSS3 */

… и все заработает.

А сейчас парочка примеров того, что можно сотворить, используя закругление углов.

  • Закругленная кнопка
    Для CSS:
    
.knopka2
{
color:#fff;
padding:10px;
background-color:#008B00;
border:1px solid #999;
border-radius: 0 57px 0 57px;
}

    Для HTML:

    <input type="button" value="кнопка"/>

    Результат:

  • Закругление картинки
    <img src="https://bloggood.ru//wp-content/uploads/2013/03/Webmasterok2009_avatar-96x96.jpg">

    Результат:

  • Анимированное закругление картинки (смотрите тут)

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓


Последние новости категории:

Похожие статьи

Популярные статьи:

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

Метки: css, для сайта, основы

bloggood.ru

Скругление углов CSS | Impuls-Web.ru

Приветствую вас, дорогие читатели!

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

Навигация по статье:

Простое скругление углов CSS

Если у вас появилась такая необходимость вы можете воспользоваться стандартным CSS-свойством border-radius. Например:

.radius-block{ border-radius: 25px; }

.radius-block{

border-radius: 25px;

}

В данном случае для блока задается параметр для всех сторон.

Равномерное закругление

Варианты скругления углов CSS

Так же, можно задавать радиус для каждого отдельного угла. Например:

.radius-block2{ border-radius: 5px 15px 25px 35px; }

.radius-block2{

border-radius: 5px 15px 25px 35px;

}

Разное закругление

Как видите, принцип задания параметров скругления такой же, как и у других свойств, работающих для разных сторон блока (margin, padding и т.д.). Параметры задаются по часовой стрелке, начиная с левого верхнего. Таким образом, получается, что мы задали скругление для левого верхнего угла 5px, для правого верхнего – 15px, для нижнего правого — 25px, и для нижнего левого 35px.

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

.radius-block3{ border-radius: 5px 35px; }

.radius-block3{

border-radius: 5px 35px;

}

Симметричное закругление

В данном случае первый параметр работает для верхнего левого и правого нижнего, а второй – для верхнего правого, и нижнего левого.

Необычное скругление углов CSS

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

Для этого нам нужно задать два параметра скругления через слеш. Например:

.radius-block4{ border-radius: 60px/25px; }

.radius-block4{

border-radius: 60px/25px;

}

Необычное закругление

Используя данный вариант можно даже элипс:

.radius-block5{ border-radius: 250px/75px; }

.radius-block5{

border-radius: 250px/75px;

}

Элипс

Благодаря использованию различных комбинаций скругления уголов CSS-стилями вы можете добиться очень интересных форм для блоков с контентом и кнопок для вашего сайта. Главное не перестараться:)

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

А на этом у меня сегодня все. Желаю вам успехов в экспериментах. До встречи в следующих статьях!

С уважением Юлия Гусарь

impuls-web.ru

Совет CSS: лучшее скругление углов

От автора: все мы применяли в своем дизайне border-radius для скругления углов изображений, div’ов, nav’ов и т.д… Но замечали ли вы, что происходит, когда к элементу с радиусом добавляется толстая рамка?

Как известно из моей статьи Углубляемся в CSS, закругленные углы в border-radius формируются из радиуса четверти окружности.

Четвертые части каждой окружности формируют закругленные углы элемента.

Когда объединяются толстые рамки

При объединении border-radius с широким border-width возникает небольшая проблемка. У следующего изображения, например, значение радиуса равно двум значениям толщины рамки.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

.mike { border-radius: 12px; border: 6px solid crimson; }

.mike {

  border-radius: 12px;

  border: 6px solid crimson;

}

Пока нет проблем.

Но если установить значение border-width больше border-radius, мы потеряем скругленные углы – края нашего изображения станут квадратными.

.mike { border-radius: 12px; border: 14px solid crimson; }

.mike {

  border-radius: 12px;

  border: 14px solid crimson;

}

Рамка становится шире, а углы изображения – квадратными.

Почему так происходит?

Это из-за того, что на самом деле border-radius придает форму внешней части рамки –– не внутренней. Очертание внутреннего радиуса определяется значением border-radius минус толщина рамки. Это отражается на внутреннем радиусе, который обычно меньше внешнего.

Так что, если значение ширины рамки border-width больше border-radius, мы видим эффект четверти радиуса, соединяющего две рамки, которые толще самого радиуса. Обратите внимание на квадратный внутренний радиус:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Чтобы оба радиуса были пропорциональными, нам понадобится подогнать значение радиуса примерно к двойной ширине рамки, или сумме ширины border-width и радиуса рамки border-radius.

.mike { border-radius: 26px; border: 14px solid crimson; }

.mike {

  border-radius: 26px;

  border: 14px solid crimson;

}

При изменении значения border-radius до 26px мы получаем обратно свои закругленные углы изображения.

Метод Box-shadow

При образовании тени блока тень следует за радиусом рамки элемента. Помня об этом, можно использовать значение дополнительного расширения box-shadow для создания того, что смотрится в точности как рамка.

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

.mike { border-radius: 12px; box-shadow: 0 0 0 14px crimson; }

.mike {

  border-radius: 12px;

  box-shadow: 0 0 0 14px crimson;

}

Результат смотрится в точности как пример со стилем рамки. Но теперь нам не нужно беспокоиться о возрастании border-radius каждый раз при увеличении ширины рамки, потому что расширенное значение последует за радиусом.

Применение переменных Sass

Если мы используем препроцессор типа Sass, то для ширины и радиуса рамки можно создать переменные, затем применить простую математическую операцию, которая пропорционально сформирует радиус.

$border-width: 14px; $radius: $border-width*1.9; .mike { border: $border-width solid crimson; border-radius: $radius; }

$border-width: 14px;

$radius: $border-width*1.9;  

 

.mike {

  border: $border-width solid crimson;

  border-radius: $radius;

}

Заключение

Должен предупредить вас насчет указанного здесь метода box-shadow. Так как тени блока не являются частью блочной модели элемента, фальшивые рамки перекрывают части других встраиваемых или «плавающих» элементов, поэтому понадобится компенсировать их с помощью дополнительных полей. Тени блока CSS поддерживаются во всех последних браузерах, включая IE9+.

Автор: Guil Hernandez

Источник: http://blog.teamtreehouse.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

webformyself.com

Закругление углов CSS

Одинаковый радиус для всех углов

Для того чтобы установить одинаковый радиус для всех углов блока нужно указать одно значение:

Чтобы радиус отображался в других браузерах, запись производится с дополнительными префиксами:


-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;

Префикс -moz записывается для отображения в браузере Firefox,
а –webkit, для Safari и Google Chrome.


HTML

<div>
  &nbsp;
</div>



CSS

.box{
    width: 150px;
    height: 150px;	
    border: 3px solid #444;
    background-color: #fC0;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
Одинаковые радиусы по диагонали

Свойство border-radius с двумя значениями отображает одинаковые радиусы по диагонали. Первое значение задаёт верхний левый и нижний правый радиус, а второе верхний правый и нижний левый.


-webkit-border-radius: 40px  20px;
-moz-border-radius: 40px  20px;
border-radius: 40px  20px;

1. Верхний левый и нижний правый – 40px

2. Верхний правый и нижний левый – 20px


HTML

<div>
  &nbsp;
</div>



CSS

.box{
    width: 150px;
    height: 150px;
    border: 3px solid #444;	
    background-color: #fC0;
    -webkit-border-radius: 40px 20px;
    -moz-border-radius: 40px 20px;
    border-radius: 40px 20px;
}
Два равных радиуса по диагонали и два по отдельности

У свойства border-radius с тремя значениями первый параметр отображает радиус верхнего левого угла, второй верхнего правого и нижнего левого, а третий нижнего правого.


-webkit-border-radius: 10px 40px 20px;
-moz-border-radius: 10px 40px 20px;  
border-radius:  10px 40px 20px;

1. Верхний левый – 10px

2. Верхний правый и нижний левый – 40px

3. Нижний-правый – 20px

Каждый радиус задаётся в отдельности

Свойство border-radius с четырьмя значениями указывает на то, что каждое закругление угла задаётся по отдельности. Первое значение задаёт верхний левый радиус, второй верхний правый, третий нижний правый, четвёртый нижний левый.


-webkit-border-radius: 0px 10px 20px 40px;
-moz-border-radius: 0px 10px 20px 40px;
border-radius:  0px 10px 20px 40px;

1. Верхний левый – 0px

2. Верхний правый – 10px

3. Нижний правый – 20px

4. Нижний левый – 40px

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

-webkit-border-radius: 20px 0px 0px 20px;
-moz-border-radius: 20px 0px 0px 20px;
border-radius: 20px 0px 0px 20px;
Закругления блока с правой стороны

-webkit-border-radius: 20px 20px 0px 0px;
-moz-border-radius: 20px 20px 0px 0px;
border-radius: 20px 20px 0px 0px;
Закругления сверху

-webkit-border-radius: 0px 20px 20px 0px;
-moz-border-radius: 0px 20px 20px 0px;
border-radius:  0px 20px 20px 0px;
Закругления снизу

-webkit-border-radius: 0px 0px 20px 20px;
-moz-border-radius: 0px 0px 20px 20px;
border-radius:  0px 0px 20px 20px;
Круг из квадратного блока

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


HTML

<div>
  &nbsp;
</div>



CSS

.circle{
    width: 150px;
    height: 150px;
    border: 3px solid #444;
    background-color: #fC0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
Блок с закруглениями

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


HTML

<div>
  &nbsp;
</div>



CSS

.rounding{
    width: 200px;
    height: 100px;	
    background-color: #fC0;
    border: 3px solid #444;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;  
}

code-pattern.ru

Закругленные углы CSS

Приветствую, Друзья. Данная статья посвящена  довольно популярной теме среди начинающих вебмастеров — закругленные углы CSS. Вопросы, которые я попытаюсь, раскрыть будут касаться того, как сделать скругленные углы элементов сайта, используя только CSS не прибегая к использованию каких-либо изображений.

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

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

Однако закругление углов с помощью CSS становится все популярнее и популярнее. Как Вы уже могли понять, в данной статье мы будем использовать свойство доступное в CSS 3.

Скругленные углы с помощью CSS.

Итак, для примера мы возьмем блочный элемент DIV и сделаем его углы скругленными. Для примера создадим блок, и прямо в HTML-коде будем назначать ему свойства, используя атрибут style. Сначала мы имеем блочный элемент залитый фоном любого цвета:

<div></div>

Кстати, если Вам необходимо узнать какой код цвета у Вас на сайте или на любом другом, Вам пригодится данная статья.

А вот так мы увидим его в веб-браузере:

Теперь, чтобы закруглить углы воспользуемся свойством «border-radius», которое можно перевести, как радиус границы. Да именно так, а не как многие могли подумать, что это радиус рамки или как там его еще называют (border). Данное свойство отвечает именно за радиус границ элемента, а не за его рамки или бордюры, которых может и не быть. Однако, свойство будет по-прежнему работать и без использования border у элемента. Надеюсь, вы поняли, что я хотел сказать. Значением для данного свойства являются любые числовые значения, которые применимы в CSS, такие как проценты, пикселы (px), пункты (pt) и так далее. Да, и следует учитывать, что данное свойство работает сразу на все четыре угла элемента, кроме того, можно указать разный радиус для каждого угла, но об этом чуть позже. Для начала зададим радиус углов нашего прямоугольника. Пусть он будет равен 5 пикселам:

<div></div>

Тогда элемент станет выглядеть так:

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

border-top-left-radius:5px; /* верхний левый угол */
 border-top-right-radius:5px; /* верхний правый угол */
 border-bottom-right-radius:5px; /* нижний правый угол */
 border-bottom-left-radius:5px; /* нижний левый угол */

То есть, если мы хотим задать каждому углу свое значение, мы имеем такую возможность, и чтобы убедиться в этом возьмем следующий код:

<div></div>

И тогда мы получим такой результат:

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

<div></div>

Где значения будут следовать в таком порядке:

border-radius: 5px /* верхний левый угол */ 10px /* верхний правый угол */ 15px /* нижний правый угол */ 20px /* нижний левый угол */;

Соответственно, исходя из выше сказанного, становится понятно, что таким же образом мы можем задать границу радиуса только для трех (одного или двух) углов:

<div></div>

Так это выглядит в веб-браузере:

Если Вы еще не совсем запутались, то продолжим. Дело в том, что радиус для каждой границы угла может быть указан не в одном значении, как мы рассматривали выше, а в двух. То есть два значения для каждого угла. В таком случае первое значение установит радиус для угла по горизонтали, а второе по вертикали. Давайте начнем сначала с одного угла:

<div></div>

В данном примере мы воздействовали только на левый верхний угол элемента:

Если расставить значения наоборот, тогда элемент станет выглядеть так:

На этом вроде бы можно было бы, и закончить, но нет. Есть еще одна хитрость. В значении свойства мы можем использовать слеш (/) между значениями. Слеш может помочь нам совместить значения с другими значениями. В общем проще показать, чем рассказать. Начнем с простого. Предположим, что нам необходимо, чтобы по горизонтали радиус был равен 35 пикселам, а по вертикали 5. При этом, чтобы данные значения относились ко всем углам. Тогда мы можем написать так:

<div></div>

И получить вот такой результат:

Теперь рассмотрим пример посложнее:

<div></div>

В данном случае значение до знака слеша (/) будет иметь отношение к горизонтальному радиусу угла, а после знака к вертикальному. При этом значения будут относиться друг к другу таким образом:

border-top-left-radius: 20px 15px;
 border-top-right-radius: 10px 25px;
 border-bottom-right-radius: 40px 15px;
 border-bottom-left-radius: 10px 25px;

А результат будет таким:

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

Закругление углов в различных веб-браузерах.

Здесь стоит отметить, что данное свойство поддерживается не всеми версиями браузеров. Свойство поддерживается в IE9 +, Firefox 4 +, Chrome, Safari 5 +, и Опера.
Но для некоторых браузеров версии, которых не поддерживают данное свойство, существуют нестандартные свойства, которые добавляют, так называемый префикс или приставку к свойству.
Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-bottom-left-radius.
Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius-bottomleft.
При этом нам придется продублировать свойство, используя данные префиксы. Например, если у нас задано свойство для границы левого верхнего угла значение, которого равно пяти пикселам:

border-top-left-radius: 5px;

Тогда свойство с дублированием его с помощью префиксов будет выглядеть так:

-webkit-border-bottom-left-radius:5px;
 -moz-border-radius-bottomleft:5px;
 border-top-left-radius: 5px;

Очень надеюсь, что смог понятно все объяснить и Вам теперь понятно, как сделать закругленные углы, используя только CSS.
Удачи, Вам!

sdelaemblog.ru

Comments
Leave Comment