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

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

Синтаксис границы-радиуса

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

Свойство border-radius принято во всех основных браузерах, но у них есть специфические атрибуты браузера. Вот атрибуты CSS и браузера:

Каждое из отдельных свойств угла CSS3 принимает одно или два значения длины (обычно значение px или em). Если указано одно значение, то оно становится радиусом закругленного угла. Если указано два значения, они становятся горизонтальными и вертикальными радиусами для эллиптического угла.

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

Вам больше нужно использовать префиксы border-prefixes?

Теперь, когда я показал вам специфические для браузера префиксы рамок, вопрос заключается в том, действительно ли вам нужно их использовать или вы можете обойтись просто использованием свойств CSS3?

Простой ответ на этот вопрос зависит от того, какую версию браузера поддерживает ваш веб-сайт.

Firefox 3.6 требует использования -moz- префикс. С 4 и выше использование свойств CSS3 является нормальным.

Safari 4 нуждается -webkit- префикс. Safari 5 и выше воспринимает характеристики CSS3.

iOS3 нуждается -webkit- префикс. Это касается только iPhone 3GS или iPad 1, которые никогда не обновлялись.

Основная демонстрация свойства border-radius

Вот две демонстрации радиуса границы. Значение свойства может быть в пикселях, rem, em или %.

div {    width: 100px;    height: 100px;    background-color: #7db9e8;}#demo-one {    border-radius: 20px;}#demo-two {    border-radius: 50%;}

Для первого div к каждому углу div применяется скругленный угол 8px. Во втором примере к каждому углу применен округленный угол на 50%, что создает круг.

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

Когда вы указываете отдельные значения, они применяются в следующем порядке: слева вверху, справа вверху, справа внизу, слева внизу. Вот пример:

#demo-three {    border-radius: 10em 20em 10em 20em;}#demo-four {    border-radius: 40px 5px;}

Эллиптические ребра

Края не обязательно должны быть круглыми, они также могут быть эллиптическими. Чтобы создать эллиптическое ребро, вы ставите косу риска (“/”) между двумя значениями. Вот пример:

#demo-five {    border-radius: 10% / 50%;}#demo-six {    border-radius: 50% / 10%;}

Создание нашего калькулятора

Мы собираемся применить то, что только что узнали о border-radius, чтобы создать этот калькулятор:

Калькуляторная рамка

Поначалу нам необходимо сделать каркас для нашего калькулятора. Верхняя часть калькулятора будет иметь дугу, а нижняя – закругленные края. Чтобы создать этот дизайн, мы укажем значение для каждого отдельного угла следующим образом:

.calc-frame {    display: flex;    flex-direction: column;    align-items: center;    max-height: 650px;    max-width: 400px;    width: 90%;    padding: 20px;    border: solid 5px #41403E;    border-top-left-radius: 270px 100px;    border-top-right-radius: 270px 100px;    border-bottom-right-radius: 35px;    border-bottom-left-radius: 35px;    background: #b1b1b1;}

Рамка результата калькулятора

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

.calc-result-frame {    background: #fefefe;    border: solid 5px #41403E;    width: 100%;    height: 150px;    border-top-left-radius: 270px 100px;    border-top-right-radius: 270px 100px;    border-bottom-right-radius: 10px;    border-bottom-left-radius: 10px;    display: flex;    justify-content: center;    align-items: flex-end;}.calc-result-input {    width: 85%;    height: 70px;    text-align: right;    color: #41403E;    overflow: hidden;    font-size: 2rem;

Логотип калькулятора и кнопка питания

Следующие элементы, которые нужно добавить в наш калькулятор, это логотип «BLAND INSTRUMENTS» и кнопка питания. Мы используем код в #demo-four для логотипа и код в #demo-two для кнопки питания. Это выглядит так:

.calc-logo {    background: #41403e;    color: #e8eff0;    border: solid px #41403E;    border-radius: 40px 5px;    width: 250px;    height: 50px;    line-height: 50px;    font-weight: bold;    text-align: center;}.calc-on {    border-radius: 50%;    border: none;    background: #bb0f29;    color: #fefefe;    width: 50px;    height: 50px;}

Кнопки калькулятора

Далее мы создадим стиль каждой кнопки калькулятора. Мы укажем стиль для каждого угла, а затем придадим два значения для каждого угла. Это создает нарисованный от руки вид кнопок. Вот код:

.calc-btn {    background: transparent;    color: #41403E;    font-size: 2rem;    width: 75px;    height: 75px;    outline: none;    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;    border: solid 7px #41403E;    flex: 1;    transition: all .5s ease;}

Кнопка ввода

Последнее, что нам нужно добавить в наш калькулятор, это ENTER кнопку. Для этой кнопки мы будем использовать код из #demo-one. Вот код:

.calc-enter {    background: #bb0f29;    color: #fefefe;    border-radius: 20px;    border: none;}

Анимация кнопки

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

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

Чтобы обеспечить анимацию, мы собираемся добавить переход к кнопке. Затем мы предоставим другую тень прямоугольника для кнопок, когда пользователь наводит на них курсор. Вот код:

.calc-btn {    background: transparent;    color: #41403E;    font-size: 2rem;    width: 75px;    height: 75px;    outline: none;    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;    border: solid 7px #41403E;    flex: 1;    box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);    transition: all .5s ease;}.calc-btn:hover {    box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);}

И вот наш готовый калькулятор:

Получите код

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

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

Спасибо, что прочли

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

Вот другие мои статьи, которые могут вас заинтересовать:

Вот пять макетов, которые можно создать с помощью FlexBox
Думайте нестандартно с помощью CSS shape-outside
Почему культура компании важна для вашей карьеры инженера-программиста