rad в CSS

Содержание

Типы данных CSS

В CSS существуют следующие меры длены:
em — эквивалентны вычисленному значению свойства ‘font-size’ того элемента, в котором оно используется. Исключением является тот случай, когда ’em’ появляется в самом значении свойства ‘font-size’, тогда оно относится к размеру шрифта родительского элемента. Может использоваться для вертикального или горизонтального измерения. (Эта единица измерения иногда называется квад-ширина в типографском тексте.)

ex— определяются ‘x-height’ шрифта. x-height называется так, потому что она часто равна высоте «x» нижнего регистра. Однако ‘ex’ определены даже для тех шрифтов, которые не содержат «x».

px — Пиксели относительны к разрешению устройства просмотра, т.е. чаще всего — дисплея компьютера. Если плотность пикселов выводного устройства сильно отличается от плотности типичного компьютерного дисплея, ПА должен перемасштабировать пиксельные значения. Рекомендуется, чтобы пиксель в качестве точки отсчёта был визуальным углом одного пикселя на устройстве с плотностью пикселов 90dpi на расстоянии вытянутой руки от читателя. При нормальной длине руки 28 дюймов визуальный угол будет примерно 0.0227 градусов.

in — дюймы — 1 дюйм равен 2.54 сантиметра.

pt — пункт, используемый в CSS2, равен 1/72 дюйма.

pc — пики. 1 пика равна 12 пунктам.

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

Цвет это или предопределённое слово, или числовая спецификация RGB.

Список названий цветов: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white и yellow. Эти 16 цветов определены в HTML 4.0. Пользователь может дополнительно специфицировать ключевые слова, соответствующие цветам, используемым определёнными объектами в среде пользователя.

Формат значения RGB в 16-ричной записи — ‘#’ за которым сразу идут три или шесть 16-ричных символов. Трёхсимвольная запись RGB (#rgb) конвертируется в шестисимвольную форму (#rrggbb) путём дублирования цифр, но не дополнением нулями. Например, #fb0 расширяется до #ffbb00. Это гарантирует, что белый (#ffffff) можно специфицировать сокращённой записью (#fff) и удалить зависимость от глубины цвета на дисплее.

Формат значения RGB в функциональной записи — ‘rgb(‘ за которым идёт список разделённых запятыми трёх числовых значений (или трёх целых, или трёх процентных) с последующей ‘)’. Целое значение 255 соответствует 100% и F или FF в 16-ричной записи: rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. Пробельные символы допускаются вокруг числовых значений.

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

deg — градусы
grad — грады
rad — радианы

Угловые значения могут быть негативными. Они должны быть нормализованы ПАгентом до диапазона 0-360deg. Например, -10deg и 350deg эквивалентны. Для примера, правый угол — ’90deg’ или ‘100grad’, или ‘1.570796326794897rad’.

Значения частот используются со звуковыми каскадными таблицами стилей. Идентификаторами единиц измерения частоты являются:

hz — герцы
khz — килогерцы

Значения частоты не могут быть негативными. Например, 200Hz (или 200hz) — это басовый звук, а 6kHz (или 6khz) — средний регистр.

CSS border-radius Property

Example

Add rounded corners to two

#example1 <
border: 2px solid red;
border-radius: 25px;
>

#example2 <
border: 2px solid red;
border-radius: 50px 20px;
>

More «Try it Yourself» examples below.

Definition and Usage

The border-radius property defines the radius of the element’s corners.

Tip: This property allows you to add rounded corners to elements!

This property can have from one to four values. Here are the rules:

Four values — border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner):

Three values — border-radius: 15px 50px 30px; (first value applies to top-left corner, second value applies to top-right and bottom-left corners, and third value applies to bottom-right corner):

Two values — border-radius: 15px 50px; (first value applies to top-left and bottom-right corners, and the second value applies to top-right and bottom-left corners):

One value — border-radius: 15px; (the value applies to all four corners, which are rounded equally:

Default value:
Inherited: no
Animatable: yes. Read about animatable Try it
Version: CSS3
JavaScript syntax: object.style.borderRadius=»25px» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
border-radius 5.0
4.0 -webkit-
9.0 4.0
3.0 -moz-
5.0
3.1 -webkit-
10.5

CSS Syntax

Note: The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.

Property Values

Value Description Play it
length Defines the shape of the corners. Default value is 0. Read about length units Play it »
% Defines the shape of the corners in % Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Set rounded corners for an element with a background color:

Example

Set rounded corners for an element with a border:

Example

Set rounded corners for an element with a background image:

Example

Also notice this:

#example1 <
border-radius: 2em / 5em;
>
/* is equivalent to:
border-top-left-radius: 2em 5em;
border-top-right-radius: 2em 5em;
border-bottom-right-radius: 2em 5em;
border-bottom-left-radius: 2em 5em; */

#example2 <
border-radius: 2em 1em 4em / 0.5em 3em;
>
/* is equivalent to:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em; */

Border Radius

Class Properties
.rounded-none border-radius: 0;
.rounded-sm border-radius: .125rem;
.rounded border-radius: .25rem;
.rounded-lg border-radius: .5rem;
.rounded-full border-radius: 9999px;
.rounded-t-none border-top-left-radius: 0; border-top-right-radius: 0;
.rounded-r-none border-top-right-radius: 0; border-bottom-right-radius: 0;
.rounded-b-none border-bottom-right-radius: 0; border-bottom-left-radius: 0;
.rounded-l-none border-top-left-radius: 0; border-bottom-left-radius: 0;
.rounded-t-sm border-top-left-radius: .125rem; border-top-right-radius: .125rem;
.rounded-r-sm border-top-right-radius: .125rem; border-bottom-right-radius: .125rem;
.rounded-b-sm border-bottom-right-radius: .125rem; border-bottom-left-radius: .125rem;
.rounded-l-sm border-top-left-radius: .125rem; border-bottom-left-radius: .125rem;
.rounded-t border-top-left-radius: .25rem; border-top-right-radius: .25rem;
.rounded-r border-top-right-radius: .25rem; border-bottom-right-radius: .25rem;
.rounded-b border-bottom-right-radius: .25rem; border-bottom-left-radius: .25rem;
.rounded-l border-top-left-radius: .25rem; border-bottom-left-radius: .25rem;
.rounded-t-lg border-top-left-radius: .5rem; border-top-right-radius: .5rem;
.rounded-r-lg border-top-right-radius: .5rem; border-bottom-right-radius: .5rem;
.rounded-b-lg border-bottom-right-radius: .5rem; border-bottom-left-radius: .5rem;
.rounded-l-lg border-top-left-radius: .5rem; border-bottom-left-radius: .5rem;
.rounded-t-full border-top-left-radius: 9999px; border-top-right-radius: 9999px;
.rounded-r-full border-top-right-radius: 9999px; border-bottom-right-radius: 9999px;
.rounded-b-full border-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px;
.rounded-l-full border-top-left-radius: 9999px; border-bottom-left-radius: 9999px;
.rounded-tl-none border-top-left-radius: 0;
.rounded-tr-none border-top-right-radius: 0;
.rounded-br-none border-bottom-right-radius: 0;
.rounded-bl-none border-bottom-left-radius: 0;
.rounded-tl-sm border-top-left-radius: .125rem;
.rounded-tr-sm border-top-right-radius: .125rem;
.rounded-br-sm border-bottom-right-radius: .125rem;
.rounded-bl-sm border-bottom-left-radius: .125rem;
.rounded-tl border-top-left-radius: .25rem;
.rounded-tr border-top-right-radius: .25rem;
.rounded-br border-bottom-right-radius: .25rem;
.rounded-bl border-bottom-left-radius: .25rem;
.rounded-tl-lg border-top-left-radius: .5rem;
.rounded-tr-lg border-top-right-radius: .5rem;
.rounded-br-lg border-bottom-right-radius: .5rem;
.rounded-bl-lg border-bottom-left-radius: .5rem;
.rounded-tl-full border-top-left-radius: 9999px;
.rounded-tr-full border-top-right-radius: 9999px;
.rounded-br-full border-bottom-right-radius: 9999px;
.rounded-bl-full border-bottom-left-radius: 9999px;

Rounded corners

Use the .rounded-sm , .rounded , or .rounded-lg utilities to apply different border radius sizes to an element.

Pills and circles

Use the .rounded-full utility to create pills and circles.

No rounding

Use .rounded-none to remove an existing border radius from an element.

This is most commonly used to remove a border radius that was applied at a smaller breakpoint.

Rounding sides separately

Use .rounded- <-size?>to only round one side an element.

Закруглённые углы (свойство border-radius) | CSS

Генератор border-radius CSS

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

Использование свойства CSS border-radius (w3.org) позволяет закруглить углы элемента HTML даже без применения свойства border. Оно действует и на background, и на box-shadow. Но не на outline и border-image.

background box-shadow outline [решение] border-image [решение]

Круглые углы у картинки

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

Закруглить края у видео на YouTube

HTML таблица с закругленными углами

Закруглить таблицу можно, но с border-collapse: separate;

1 2 3
1.1 2.1 3.1
1.2 2.2 3.2

border-radius у вложенных элементов

Я как и Rakesh пришла к выводу: дабы ширина рамки в сторонах и углах имела одинаковый размер, нужно чтобы

CSS скругление углов у border-image

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

Округление outline

Firefox поддерживает -moz-outline-radius. Но пока его нет в w3.org, outline почти полноценно заменяется box-shadow (см. образец).

Закругление углов в примерах

HTML овал

HTML круг

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

HTML цилиндр

Закругленные три края, HTML капля

HTML полукруг

HTML лист

HTML яйцо

Камушек HTML

29 комментариев:

Tanka Спасибо! Очень интересно =) витько Польза.
Приятный сайт,полезная статья Анонимный Спасибо большое! Давно искала такой материал. Супер сайт. Наталка Михайлівна Зуб Я как всегда ничего не поняла (ну далекая я от всего этого). Скажите пожалуйста, можно ли в моем шаблоне(путешествие) сделать закругленные углы, чтобы было как в шаблоне Венецианское окно (вариант 2).Там еще на главной странице каждое сообщение отделено один от одного, а у меня идет одним потоком и где заканчивается одно сообщение и начинается второе можно узнать только по дате.
Мой блог http://revival2012nataliz.blogspot.com/ NMitra Посмотрите эту страницу http://shpargalkablog.ru/2010/12/pomenyat-fon-gadzhetov-blogger.html Наталка Михайлівна Зуб Спасибо большое!С закругленными углами для гаджетов не получилось, так как тяжело потом подобрать цвет фона под блог и встроенные гаджеты не очень(погодный информер глобус и т.д.)Но главное что получилось с сообщениями.Еще раз спасибо за помощь!Я часто пользуюсь Вашей помощью и Ваш блог мне очень помогает! Сергей А этот код поддерживается во всех браузерах? Хочу сделать округлые пункты меню http://antiloh.net в шапке сайта. Сергей В IE не работает, не критично — для информации NMitra Последние версии IE поддерживают это свойство. См http://caniuse.com/#search=border-radius Космо Мизраил «Чтобы сделать круг, нужно использовать квадрат.»
Мой мозг х) Наталья, может, стоит написать «использовать блок квадратной формы»? :) NMitra Ха-ха-ха.. Подправила. Евгений Курочкин Отличная статья!
Для скругления в IE 6-8 есть доп коды — http://css3pie.com/, например. Не пренебрегайте IE, так как много пользователей работают именно с ним. NMitra На мой взгляд, увидит человек скруглённые уголки или нет не сильно повлияет на работоспособность сайта. Поэтому именно в этом случае можно пренебречь поздними версиями IE. Гораздо хуже, если человек не сможет воспользоваться формой заказа, потому что использован document.querySelector.

Вот позиция Гугл мне нравится: наплевали они на всех, кто ранние версии браузеров используют. Хочешь красивого вида сайта — нажми кнопку «Обновить». Анонимный Мне понравилась фига — фавикон сайта =) NMitra Мне тоже)) Жаль, что её некоторые путают с другой частью тела. Родион Спасибо огромное! NMitra Пожалуйста! Анна Сычева Спасибо огромное! нашла то, что искала, и даже лучше! рамка из тени — это просто праздник :) NMitra Рада слышать! Анонимный бабки давай сюда! Fedor Timofeev Как сделать что бы стили не конфликтовали?
Не работает стиль
/*Круглые углы у таблицы */
div.radius <
border-radius: 15px;
background: #e7d5c0;
>
/*Круглые углы у таблицы конец */

Если ставлю стиль
img.grayscale <
width: 200px;
height: 200px;
border-radius: 50%;
для другого див NMitra Пример на https://jsfiddle.net/ выложите и его ссылку дайте в комментариях, а лучше свою страницу. Можете сами попробовать разобраться в селекторах. Приоритетный тот, что длиннее http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html
Вам что нужно: 15px или 50%? Fedor Timofeev Здравствуйте.
мне нужны и 15px и 50%? так как используются в абсолютно разных случаях.
Может из как то переименовать?

ссылка на страницу, где применяются оба класса: http://ex-hort.ru/

CSS: /*обесцвечивание круглой картинки */

img.grayscale <
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
transition: all 1s ease;
cursor: pointer;
>
img.grayscale:hover <
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
filter:none;
>
.grayscale.grayscale-replaced > svg <
transition: opacity 1s ease;
opacity: 1;
>
.grayscale.grayscale-replaced.grayscale-fade:hover > svg <
opacity: 0;
>
img.grayscale <
width: 200px;
height: 200px;
border-radius: 50%;
>

/*обесцвечивание круглой картинки конец */

CSS: /*Круглые углы у таблицы */
div.radius <
border-radius: 15px;
background: #e7d5c0;
>
/*Круглые углы у таблицы конец */
Fedor Timofeev что все дивы куда то подевались. NMitra Здравствуйте, код в комментариях через http://shpargalkablog.ru/2010/12/napisat-kod-tekstom.html пропустите. И всё же я не поняла что не так. Как могут конфликтовать стили, если они привязаны к разным тегам? Расскажите, пожалуйста, на словах, например, так «Картинка с нарисованным попугаем должна быть закруглена на 15px, а она на 50%». Fedor Timofeev Так, ладно, на пальцах.
До того как в CSS вставил /*обесцвечивание круглой картинки */

img.grayscale <
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
transition: all 1s ease;
cursor: pointer;
>
img.grayscale:hover <
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
filter:none;
>
.grayscale.grayscale-replaced > svg <
transition: opacity 1s ease;
opacity: 1;
>
.grayscale.grayscale-replaced.grayscale-fade:hover > svg <
opacity: 0;
>
img.grayscale <
width: 200px;
height: 200px;
border-radius: 50%;
>

ВОТ ЭТОТ СТИЛЬ, который ниже, РАБОТАЛ
CSS: /*Круглые углы у таблицы */
div.radius <
border-radius: 15px;
background: #e7d5c0;
>
/*Круглые углы у таблицы конец */
НО ПОСЛЕ ПОЯВЛЕНИЯ В CSS /*обесцвечивание круглой картинки */

Стиль border-radius: 15px; тупо не работает. NMitra Проверяйте ошибки в CSS. Я, например, увидела «яЛП»

img.grayscale <
width: 200px;
height: 200px;
border-radius: 50%;
>яЛП Fedor Timofeev Спасибо большое за содействие но проблема решилась и Ваша помощь тоже была очень нужна.
Здесь мне всё помогли:
http://goo.gl/BRNaui
С удовольствием размещу ссылку на Ваш ресурс без rel=»nofollow» на своем сайте без всяких условий с моей стороны.
Укажите как Вы хотите видеть свою ссылку.
На почту vamsydanado-a@yandex.ru

NMitra А я увидела в исходном коде не точку, а «яЛП»

По поводу ссылки: с каким пожелаете анкором, на какую захотите страницу. Всегда считала, что естественную ссылку может поставить только автор веб-проекта. А на «Шпаргалку блоггера» ведут в основном такие.

CSS border: radius, color, style и другие css свойства border

Я уверен, вы уже знакомы с css свойством border. Узнаете ли вы что-то новое, чего не знали раньше о css border? Что же, не только узнаете, но и увидите несколько новых вещей, которых вы никогда не знали прежде!

Не только CSS3 можно использовать для закругления уголков, но и чистый CSS код подойдет для создания сложных форм. Раньше вы могли использовать background-image, для создания впечатления закругленных уголков. Благодаря новым техникам использования border, мы можем сделать это на чистом css коде.

Основы использования css border

Наверняка, вы уже ознакомлены со стандартным использованием border свойства:

Код выше, выведет рамку в 1px, которая будет черного цвета. Легко и просто. Также можно немного расширить синтаксис:

Как дополнение, можно использовать специфические значения свойства border-width, три ключевых слова: thin, medium, thick.

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

Более элегантно и проще можно сделать следующим образом:

Как видите, расширенная техника также полезна, когда мы меняем только некоторые свойства: width, style, color и другие.

Border-Radius

Border-radius – это «золотое» свойство CSS3 – первое, наиболее распространенное свойство, которое стало практичным и полезным. Исключая IE8 и версии ниже, все браузеры отображают закругленные уголки с помощью этого.

Хотя, необходимо использовать специальные префиксы для Webkit и Mozilla, чтобы стилизация была корректной.

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

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

В коде выше, устанавливая border-top-right-radius и border-bottom-left-radius на «нуль», можно добиться удивительных форм. Хотя элемент может наследовать некоторые свойства, которые нужно будет обнулить.

Наподобие как margin и padding, мы можем сжать синтаксис:

Как пример, применения свойства border-radius, покажу вам «лимон», который часто используют дизайнеры при верстке сайтов:

Идем далее основ

Во многих дизайнеров все познания, в области css свойства border, на этом заканчиваются. Но существует еще несколько крутых штук, с помощью которых можно создать потрясающие вещи!

Сложные структуры css border

Существует множество техник для создания дизайна с применением сложных структур border. Для примера, разберем следующие…

Border-Style

Мы всегда используем наиболее известные свойства solid, dashed и dotted. Но существует парочка иных свойств border-style: groove и ridge.

Или в расширенном синтаксисе:

Хотя эти свойства и полезны, но они не являются основой создания сложных рамок.

Outline

Наиболее популярная техника создания двойной рамки – использование свойства outline.

Этот способ работает отлично, хотя, он нас ограничивает только двумя рамками. Иногда бывает нужно создать градиентный border, который состоит из многих слоев… как тогда?

Псевдоэлементы

Когда техники outline не достаточно, альтернативным средством является использование псевдо элементов :before и :after. С помощью которых можно добавить дополнительные рамки к элементу:

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

Box-Shadow

Интересным «детским способом» создания подобного эффекта, является использование CSS3 свойства box-shadow:

В этом случае мы были умнее, использовали специально предназначенное свойство box-shadow. Изменяя параметры x, y, blur на «нуль», мы можем использовать разные цвета для создания множества рамок.

Но есть проблемка, в старых браузерах, которые не понимают свойства box-shadow, будет видна только одна красная рамка в 5px.

«Помните! Дизайн сайта должен выглядеть кроссбраузерно, то есть одинаково во всех браузерах. Включая старые версии.»

Изменяем углы

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

Эта техника подходит, для создания уникальных форм блоков. Для примера, вот создание эффекта завернутой бумаги:

CSS формы, с использованием border

Эта техника показывает, как можно создавать css формы, при этом использовать элементы с нулевыми размерами высоты и ширины. Удивлены? Давайте посмотрим на примере…

Для следующих нескольких примеров, мы будем использовать следующую разметку:

…и следующий базовый стиль:

Наиболее частый пример использования CSS форм – создание обтекающей стрелки. Секрет этой стрелки кроется в создании border с разными цветами для каждой из сторон. Потом, ставим атрибуты width и height на 0.

Назначим к div блоку класс arrow:

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

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

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

Создаем Speech Bubble

Для создания Speech Bubble («Речевой хмарки»), нам понадобиться небольшой кусочек чистого CSS кода и один div блок.

Далее, добавим базовый стиль:

Далее, мы прилепим стрелочку с помощью after псевдоэлемента.

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

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

Когда мы создаем эту CSS форму, мы не можем конкретно указать размер стрелочки. Вместо этого мы можем установить свойство border-width, которое будет назначать размер для стрелочки. Также мы установим позицию стрелочки внизу посредине. Соответственно для этого используем значения top и left.

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

Не плохо, а? Используя несколько css классов и хитрости border, можно создать такую штуку.

Бонус! Вертикальное центрирование внутри блока

Для одной строки текста, можно использовать line-height. Но если у вас две или больше строк текста… Наилучшим решением будет установить display свойство на table, и поместить весь текст в параграф. Вот как это выглядит на html разметке:

Далее, придадим CSS стили:

Мы не ограничиваемся треугольниками. CSS способен отобразить разные формы – даже сердечки и знак биологической опасности.

Заключение

Теперь, вы знаете гораздо больше нежели использование стандартного синтаксиса border: 1px solid black. Как видите можно создать множество красивых эффектов и форм. Кто бы мог подумать, что с помощью обычного css border, можно создать такие крутые штуки? Если знаете еще крутые штучки, с использованием css свойств border, просьба поделиться со мной в комментариях. На этом все, творческих вам успехов!

CSS3 Border Radius Generator

This CSS3 border radius generator allows you to quickly style the border radius for an HTML element using a simple editor and copy the generated CSS code straight into your project.

Generated CSS:

Border Radius Explained

The CSS3 border-radius property allows you to apply rounded corners to HTML elements without the need to use images or other hacks.

The syntax is fairly straightforward. The following rule will set the radius of all four corners of an element with id «myDiv» to 5px:

We can specify the radius of each corner individually like this:

This causes the radius of the top left corner to be set to 5px, the top right corner to be set to 10px, the bottom right to 20px and the bottom left corner to 15px.

This is not the end of the story though. At the time of writing only the latest versions of the most popular browsers support the border-radius property. However previous versions of Mozilla and Webkit browsers supported the property via their own vendor prefixed rules. Firefox 3 supported border radius rules via their «-moz-» prefix, while webkit browsers such as Safari and Chrome use the «-webkit-» prefix.

A large percentage of users still use these browsers, so to achieve rounded corners in as many browsers as possible, you should use the following syntax:

The order of these rules is important. We define the webkit and Mozilla rules first and then the border-radius rule. This is so that when this property finally becomes standardised, supporting browsers will use the final rule in this set and ignore the previous rules.

This may seem like it is cluttering up your code unnecessarily but the benefit is worth it. When you compare it to other methods which require the browser to download large background images you can appreciate the elegance of this solution.

If you use the CSS3 generator above you will notice slight variations in the way the rules work for different browsers. For example Mozilla requires the bottom right corner to be defined like this:

Whereas for webkit browsers it needs to be defined like this:

These variations are hard to remember, which is why CSS3Gen is such a useful tool.

Supporting Browsers

At the time of writing the following browsers support the CSS3 border-radius property:

border-radius

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

Тип свойства

Применяется: ко всем элементам, кроме табличных, у которых установлено свойство border-collapse со значением collapse .

Значения

Значением свойства border-radius является указание одной или нескольких величин определяющих радиус скругления в каждом углу элемента. Допустимы следующие единицы измерения:

  • Проценты — значения в процентах (%), где за 100% берется ширина или высота элемента с учетом внутренних отступов (padding) и рамки (border). Отрицательные значения (-20%) указывать нельзя.
  • Размеры — относительные или абсолютные величины в единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Для них тоже недопустимы отрицательные значения.

Процентная запись: относительно ширины или высоты элемента (в зависимости от места использования) с учетом размеров рамки и внутренних отступов.

Значение по умолчанию: 0.

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

Создание кругоподобных скруглений

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

  1. Одно значение — радиус скругления для всех углов одинаковый.
  2. Два значения — первое указывает радиус для верхнего левого и нижнего правого углов (по диагонали), а второе — для верхнего правого и нижнего левого.
  3. Три значения — первое задает радиус скругления для верхнего левого угла, второе — для верхнего правого и нижнего левого (по диагонали), третье — для нижнего правого угла.
  4. Четыре значения — начиная с верхней левого угла и по часовой стрелке: для верхнего левого, верхнего правого, нижнего правого, нижнего левого углов.

Создание овальных скруглений

Значения border-radius разбиваются на две части, между которыми ставится слеш (/). Таким образом их максимальное количество уже может достигать восьми (четыре до слеша и четыре после). Каждая из двух частей подчиняется тем же правилам, что и при создании кругоподобных скруглений, при этом значения перед слешем отвечают за радиус скругления каждого угла по горизонтали (ось X), а после слеша — по вертикали (ось Y).

Пример скругления угла с разными вариантами значений.

Обратите внимание, что координаты отсчитываются от внешнего края рамки.

Синтаксис

Пример CSS: использование border-radius

Результат. Использование свойства CSS border-radius.

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Нет Нет Нет Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: До 9.0 9.0 и выше До 4.0 От 4.0 до 7.0 7.0 и выше До 4.0 4.0 и выше До 10.5 10.5 и выше До 5.0 5.0 и выше
Поддержка: Нет Да Нет Частично Да Нет Да Нет Да Нет Частично

Google Chrome до версии 7.0 и Safari с версии 5.0 не понимают процентные значения border-radius .

Про CSS

Border-radius

Border-radius — это свойство, добавляющее элементам скругление углов.

Скругление можно задать для всего элемента сразу: border-radius: 10px;

или разным углам поотдельности, например: border-top-left-radius: 25px; border-top-right-radius: 50%;

Возможные значения: числа или проценты.

Если задать два значения , первое будет отвечать за верхний левый и нижний правый углы, а второе — за верхний правый и нижний левый:

Значения, заданные через “/”, определяют горизонтальные и вертикальные радиусы:

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

Экспериментируя с радиусами можно сделать, например, яйцо, каплю или лимон:

Или вот такую штуку:

Или цветок, или ещё какую-нибудь чепуху:

Не думаю, что имеет смысл вот так вот рисовать Css-ом, но примеры показывают, что с помощью фантазии и небольшого количества кода можно сделать много интересного.

Стилизация чекбоксов и радиокнопок на чистом CSS с совместимостью для старых браузеров

Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина jQuery Form Styler), т.к. для этого можно задействовать только CSS, причем с обратной совместимостью для старых браузеров (т.е. не в ущерб юзабилити), которые не поддерживают современные CSS-правила.

Другими словами — в современных браузерах чекбоксы и радиокнопки будут выглядеть красиво, в соответствии с задуманным дизайном, а в старых (это относится к Internet Explorer версии 8 и ниже) они останутся с оформлением «по умолчанию», характерным для каждой конкретной операционной системы.

Кроме того, сохраняется возможность HTML5-валидации стилизуемых элементов (чего может не быть при использовании JavaScript-плагинов). В современных браузерах ее поддержка — уже давно норма.

Важные особенности

Чтобы всё получилось, важно учитывать следующее:

  1. Кроме, собственно, самого тега элемента, который мы хотим красиво оформить ( или ), понадобится тег , благодаря которому переключать элемент можно, кликая на текст, а не только на сам элемент.
  2. Тег должен находиться до тега (в этом случае состояние элемента формы переключается с помощью атрибута for ), либо он должен находиться внутри тега (в этом случае атрибут for не нужен, но понадобится тег-обертка для текста).

«Фокус» заключается в использовании псевдоселекторов :checked и :not . При этом сам чекбокс или радиокнопка делаются невидимыми, а их эмуляция осуществляется с помощью псевдоэлементов :before и :after для тега или вышеупомянутого тега-обертки.

Стилизация для современных браузеров

Рассмотрим оба вариант расположения стилизуемого элемента формы. Какой из них наиболее удобен — решать вам. Суть от этого не меняется.

Теги чекбокса и радиокнопки находятся перед тегом

В HTML-коде это выглядит следующим образом:

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

CSS-код для чекбокса будет таким:

CSS-код для радиокнопки будет таким:

С помощью свойств position , z-index и opacity для классов .checkbox и .radio мы визуально прячем оригинальные элементы, при этом они остаются на том же самом месте, где будут стилизованные элементы. А с помощью margin немного смещаем их, чтобы сообщение валидации HTML5 смотрелось гармонично. В зависимости от дизайна чекбокса и радиокнопки этот отступ можно подогнать.

Теги чекбокса и радиокнопки находятся внутри тега

HTML-код в данном случае будет следующим:

По аналогии с предыдущим вариантом — тег обязательно должен быть расположен перед тегами с классом .checkbox__text и .radio__text .

CSS-код для чекбокса будет таким:

CSS-код для радиокнопки будет таким:

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

Стилизация с учетом старых браузеров

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

CSS-код для радиокнопки:

Примеры

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

border-radius

Поддержка браузеров

IE Opera Chrome Firefox Safari
IE9.0+ 10.50+ + 4.0+. Для более ранних версий — -moz-border-radius 5.0+. Для версий 3-4 — -webkit-border-radius

Пример

Скругляем уголки блока div:

Описание и использование

Свойство border-radius позволяет установить радиус скругления уголков рамки.

Значение по умолчанию:
Наследуется: нет
Версия: CSS3

Синтаксис

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

Три значения — первое задает радиус для верхнего левого угла, второе для верхнего правого и нижнего левого, а третье для нижнего правого угла.

Два значения — первое для верхнего левого и нижнего правого угла, второе для верхнего правого и нижнего левого угла.

Одно значение — одно общее значение для всех углов.

Единицы измерения радиусов — все поддерживаемые в CSS (px, % и т.д.)

Илон Маск рекомендует:  Asp работа с семействами
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL