Пояснения к статье:
- <Border>, <border-radius>, <background> — CSS свойства
- {Transparent} — CSS свойство. Отвечает за создание диагональной рамки
- "px" — значение в пикселях
В этой статье мы поговорим с вами о создании рамок, но не обычных квадратных, а закругленных. Они имеют более красивый вид чем обычные квадратные рамки без закругления.
Свойство <border-radius> расширяя пространство для творческих идей увеличивая количество возможных элементов дизайна. А в совокупности с изменением стилизации рамок, с помощью значений свойства <border>, можно создать особенную рамку, которую вы больше нигде не найдете.
В этой статье мы подробно рассмотрим создание круглых рамок и не только. В CSS присутствует такая вещь, как треугольные рамки, но об этом ниже.
Закругление рамок при помощи <border-radius>
html{
margin: 0;
padding: 15vh 0 0 0;
}
#content{
border: 5px solid red;
height: 70vh;
width: 80%;
border-radius: 15px;
margin: 0 auto
}
Данное CSS свойство позволяет закруглять границы элемента. Некоторые разработчики используют его без создания видимых рамок, для создания макетов на округлом контейнере "body".
С помощью стандартных радиусов можно создавать округлые фигуры, например круг или овал.
Для того, чтобы отследить работу данного свойства, достаточно задать свойство <background>. Хоть в его названии присутствует слово "border", к созданию рамок он напрямую не относится. Он закругляет границы веб-элемента, а не его рамку.
Само свойство <border-radius> является сокращенной записью четырех свойств: <border-top-left-radius>, <border-top-right-radius>, <border-bottom-right-radius> и <border-bottom-left-radius>. Каждое из них задает радиус закругления для каждого из четырех углов.
Простое свойство <border-radius> может применять как одно, так и 4 значения. Работает также, как со свойством <margin> или <padding>.
Закругление может применяться ко всем HTML элементам, но не во всех случаях. Некоторые браузеры не воспринимают его при загрузке рамок, которые имеют свойство <border-collapse>, со значением "collapse".
Для определения радиуса закругления можно использовать разные величины, но чаще всего значение задается в пикселях. Это связано с тем, что они лучше всего подходят для детализации элементов малого размера.
Кроме обычного закругления можно использовать дополнительный радиус, например для создания эллипса.
Для этого необходимо разделить значения дробью.
Свойство <border-radius> — примеры:
Сейчас мы покажем пару примеров создания закругленной границы. Чтобы изучить их подробнее скачайте наши исходники.
Создание треугольников при помощи <border>
Для создания треугольников необходимо использовать свойство <border>. Но здесь его использование будет немного отличаться от создания обычных рамок.
Для начала задайте нулевую ширину и высоту для элемента с треугольником.
После этого запишите несколько свойств. Первое — главное, свойство рамки. Создается почти также, как и обычно. Задаем ширину, тип линии и вписываем значение "transparent". Оно отвечает за создание треугольника.
Внимание! При создании обычных рамок мы рекомендовали вам задавать маленькую ширину, указывая небольшое значение в пикселях. Здесь же, для отображения, можно использовать более крупные величины, либо же увеличить значения в пикселях.
Для того, чтобы создать ровную сторону треугольника нужно создать отдельную линию рамки для этой стороны.
Заключение
Теперь вы знаете все о свойстве <border-radius>, которое позволит вам создавать уникальные элементы дизайна. Кроме того, треугольники, созданные при помощи "border", станут отличными декоративными частями, которые можно разместить на любой веб-странице.
Поначалу это может показаться очень сложным, но если практиковаться, то все легче чем вы думаете. Скачивайте наши исходники и изучайте их код, для лучшего понимания работы свойства. Желаем удачи в изучении!
Теги: