Как в css закруглить края – Как сделать внутренние закругленные углы с неоднотонным фоном на CSS? — Хабр Q&A
Закруглить края div. Как закруглить углы в CSS и HTML. Закругление углов картинок
Доброго всем утра, дня, вечера или ночи. С вами снова и опять Дмитрий Костин. Как-то я просматривал разные картинки и тут мне приглянулись некторые из них. А приглянулись он тем, что у них были закруглены края. Сразу как-то интереснее смотрится. Вы не находите? И поэтому в сегодняшнем уроке я хотел бы вам рассказать, как закруглить углы в фотошопе, чтобы фото смотрелось поинтереснее.
Вот чем я люблю фотошоп, так это тем, что во многих случаях одно и тоже дело можно сделать несколькими способами. Так и здесь. Давайте приступим к нашему фотошопству.
Сглаживание с использованием границ
Этот способ похож на предыдущий, но всё же сильно отличается. Проделывать всё будем с тем же самым изображением.
С помощью создания фигуры
Вот третий способ уже кардинально отличается от двух предыдущих. Так что передохните пару секунд и едем дальше. Изображение менять не буду и опять загружу эту машину в фотошоп.
Вы видите, что у вас в итоге получилось? Картинка стала с загругленными краями, а все из-за того, что она отображается только так, где стоит наш нарисованный закругленный прямоугольник. Но теперь вы можете обрезать лишний фо с помощтю инструмента»Рамка», либо же сразу сохранить картинку и у вас уже будет отдельное изображение с закругленными углами.
Попробуйте проделать все сами, а заодно и скажете, какой из представленных способов болле предпочтителен вам.
И кстати, если у вас есть пробелы в фотошопе или вы его просто хотите полностью изучить в кратчайшие сроки, то очень рекомендую вам посмотреть один замечательный курс по фотошопу для начинающих . Курс отлично сделан, рассказано и показано всё просто великолепно и каждый материал разбирается очень подробно.
Ну а на сегодня я свой урок заканчиваю. Не забудьте подписаться на новые статьи и поделитесь этим со своими друзьями. Рад был вам на моем блоге. Жду вас снова. Пока-пока.
С уважением, Дмитрий Костин
Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство border-radius . Это свойство может иметь одно, два, три или четыре значения разделённых пробелом, которые и определяют радиус всех уголков или каждого по отдельности.
В табл. 1 приведёно разное количество значений и вид блока, который получается в этом случае.
| Код | Описание | Вид |
|---|---|---|
| div | Радиус скругления для всех уголков сразу. | |
| div | Первое значение устанавливает радиус левого верхнего и правого нижнего уголка, второе значение — для правого верхнего и левого нижнего. |  |
| div | Первое значение задаёт радиус левого верхнего уголка, второе — одновременно правого верхнего и левого нижнего, а третье значение — правого нижнего. |  |
| div | Последовательно устанавливает радиус левого верхнего уголка, правого верхнего, правого нижнего и левого нижнего. |  |
В примере 1 показано создание блока со скруглёнными уголками.
Пример 1. Уголки у блока
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Меня — супплетивная форма винительного падежа от я.
Результат данного примера показан на рис. 1.
Рис. 1. Блок со скруглёнными уголками
Интересный эффект можно получить, если задать радиус скругления больше половины высоты и ширины элемента. В таком случае получится круг. В примере 2 показано создание круглой кнопки с рисунком.
Пример 2. Круглая кнопка
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Как сделать закругленные края в css. Border-radius: закругленные углы в CSS
Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство border-radius . Это свойство может иметь одно, два, три или четыре значения разделённых пробелом, которые и определяют радиус всех уголков или каждого по отдельности.
В табл. 1 приведёно разное количество значений и вид блока, который получается в этом случае.
В примере 1 показано создание блока со скруглёнными уголками.
Пример 1. Уголки у блока
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Меня — супплетивная форма винительного падежа от я.
Результат данного примера показан на рис. 1.
Рис. 1. Блок со скруглёнными уголками
Интересный эффект можно получить, если задать радиус скругления больше половины высоты и ширины элемента. В таком случае получится круг. В примере 2 показано создание круглой кнопки с рисунком.
Пример 2. Круглая кнопка
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Круглая кнопка
В браузере Opera скругление к применяется некорректно, если не задана граница через свойство border .
Свойство border-radius можно сочетать и с другими свойствами, например, добавить к элементу тень. В примере 3 сделан набор кружков, из которых один подсвечивается с помощью box-shadow . Такой набор можно использовать для навигации по страницам или по фотографиям.
Пример 3. Свечение
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 3.
Рис. 3. Свечение вокруг кружка
С помощью border-radius можно сделать не только кружок, но и эллипс, а также эллиптическое скругление у блока. Для этого надо написать не одно значение, а два через слэш. Запись 20px/10px означает, что по горизонтали радиус скругления будет 20 пикселов, а по вертикали 10 пикселов. В примере 4 показано создание эллиптических уголков для добавления к фотографии надписи оформленной как в комиксах.
Пример 4. Эллипсы
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Эллиптические уголки Вы сами себе учитель
Результат данного примера показан на рис. 4.
Рис. 4. Использование эллиптических уголков
Вид уголков можно изменить и у изображений, добавляя к селектору img свойство border-radius , как показано в примере 5.
Пример 5. Изображения
HTML5 CSS3 IE 9+ Cr Op Sa Fx
). Это делается с помощью свойства CSS border-radius . В этой статье мы рассмотрим все различные варианты.
Как закруглить края в html. Border-radius: закругленные углы в CSS
Все современные браузеры поддерживают стандарты гипертекстовой разметки HTML5 и стили оформления CCS3. И если ваш сайт (шаблон) поддерживает современные стандарты, то вы можете вносить изменения в оформление, такое как скругление углов, тени, градиентная заливка, не прибегая к помощи графических редакторов.
Вебмастера повсеместно используют скругленные углы у блоков и рамок на сайтах. Я в этой статье расскажу как же закруглить углы у картинок и фотографий на сайте без использования сторонних программ, только с помощью CSS.
Чтобы приведенные примеры в статье корректно отображались у вас на экране, вы должны использовать самые свежие версии браузеров, FireFox, Chrome и те что сделаны на основе их: Яндекс.Браузер, Амиго и так далее.
Закругление углов у блоков DIV
По стандарту CSS3 чтобы блок DIV имел скругленные углы, ему необходимо придать стиль border-radius , например так:
Для наглядности нарисуем два блока с прямыми и скругленными углами:
Блок с прямыми углами
Блок с закругленными углами
Закругление углов у картинок
По аналогии с примером выше можно закруглить углы и у картинок на сайте, например фотографий. Для наглядности закруглим углы для фотографии со страницы
Вот изображение без CSS обработки
А теперь с загругленными углами:
Чтобы стало совсем «красиво» с начала добавим окантовку…
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 кода. Например последний выглядит так:
Это хорошо когда нужно переоформить одну картинку или фотографию. А если вы захотите изменить все? Ну не будете же вы лазить по всему своему сайту, чтобы подредактировать отображение каждой. В большинстве случаев WordPress тегу IMG определяет несколько классов стилей. Один по уникальному имени файла с изображением, другой по размеру, и еще по выравниваю. Вы можете дополнить один из них вышеуказанными параметрами.
Например для всех изображений, для который не указано выравнивание, в файле style.css вашей темы WordPress пропишите следующее:
Либо самый жесткий метод для всех картиной на сайте. Переопределим стиль для всех тегов IMG :
Последний вариант подойдет не только для WordPress, а для любой CMS. И даже для простой HTML странички в том случае когда при выводе изображений тегу IMG не присваеватся никаких классов стилей. Но будьте внимательны. Если вы переопределите параметры отображения тега IMG вы измените внешний вид ВСЕХ картинок на сайте!
Вместо заключения
Все примеры в статье условные и призваны лишь продемонстрировать некоторые возможности CSS по обработки изображений и показать как это просто.
Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство border-radius . Это свойство может иметь одно, два, три или четыре значения разделённых пробелом, которые и определяют радиус всех уголков или каждого по отдельности.
В табл. 1 приведёно разное количество значений и вид блока, который получается в этом случае.
| Код | Описание | Вид |
|---|---|---|
| div | Радиус скругления для всех уголков сразу. | |
| div | Первое значение устанавливает радиус левого верхнего и правого нижнего уголка, второе значение — для правого верхнего и левого нижнего. |  |
| div | Первое значение задаёт радиус левого верхнего уголка, второе — одновременно правого верхнего и левого нижнего, а третье значение — правого нижнего. |  |
| div | Последовательно устанавливает радиус левого верхнег |
Как сделать скругленные углы с помощью css
Здравствуйте. Сегодня я расскажу, как сделать закругленные края СSS. За закругленные края в css отвечаеть свойство border-radius. Итак, чтоб получить скругленные углы css свойсту border-radius задаем значения по тому же принципу, как у margin и padding (последовательность следующая: левый верхний-правый верхний-правый нижний-левый нижний углы) наглядно смотрите на рисунке
Поддерживают border-radius браузеры вот таких версий:
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.5+ | 3.0+ | 1.0+ | 2.1+ | 1.0+ |
Теперь несколько примеров как сделать закругленные углы css:
body /*цвет фонаб толшина и цвет рамки*/ .test-1,.test-2,.test-3,.test-4,.test-5,.test-6/*общие стили слоев*/ .test-1/*это означает что все углы заокруглены на 10px, если все значения одинаковы, синтаксих CSS разрешает написать его 1 раз,но для понимания вот border-radius: 10px;=border-radius: 10px 10px 10px 10px; */ .test-2/*закруглен лиш левый вехний угол один угол*/ .test-3/*закруглены левый вехний и правый нижний уголы, если рамка остутсвует, свойство border-radius заокруглит background */ .test-4/*заокгурляя углы можно создавать элиппсы*/ .test-5/*заокгурляя углы можно создавать элиппсы*/ .test-6/*заокгурляя углы можно создавать элиппсы*/
Плагин вставки кодов, на отрез отказался вставлять код HTML, по-этому код HTML я покажу вам рисунком:
У нас получиться закругленные углы css:
Свойства border-radius можна задавать еще такими значениями:
border-bottom-left-radius:10px; /*левый нижний угол*/ border-bottom-right-radius:10px; /* правый нижний угол*/ border-top-left-radius:10px; /*левый верхний угол*/ border-top-right-radius:10px; /* правый верхний угол*/
Замечание по браузерам:
Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-radius.
Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius.
Вы наверное подумали что на этом, и статье конец, а не тут то было. Далее я раскажу вам про замечательный онлайн сервис border-radius.com, который позволит сделать скругленные углы css за считаные секунды. Пользоваться сервисом очень просто: перед вами будем прямоугольник, и поля для ввода значения округление краев, все интуитивно понятно. После того как вы ввели значение в прямоугольнике мгновенно генерируется CSS код который вы можете скопировать себе в стиль. Смотрите ниже пример на рисунке
Читайте также статью Как сделать градиентный background (фон) с помощью 1px рисунка и с помощью только CSS 3 и про полезный онлайн сервис colorzilla.com
css — Закругленные углы для используя border-radius.htc для IE
В документе W3C говорится о свойстве «border-radius» : «поддерживается» в IE9 +, Firefox, Chrome, Safari и Opera «.
Поэтому я предполагаю, что вы тестируете IE8 или ниже.
Для «обычных элементов» есть решение, совместимое с IE8 & другие старые /плохие браузеры. Смотрите ниже.
Some text Some text Some text Some text .myWickedClass < padding: 0 5px 0 0; background: #F7D358 url(../img/roundedCorner_right.png) top right no-repeat scroll; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; font: normal 11px Verdana, Helvetica, sans-serif; color: #A4A4A4; >.myWickedClass > .myCoolItem:first-child < padding-left: 6px; background: #F7D358 url(../img/roundedCorner_left.png) 0px 0px no-repeat scroll; >.myWickedClass > .myCoolItem
Вам нужно создать как roundedCorner_right.png , так и amp; roundedCorner_left.png . Это обходной путь для IE8 (& ниже), чтобы имитировать функцию закругленного угла.
Таким образом, в этом примере выше мы применяем левый закругленный угол к первому элементу span в содержащем div & мы применяем правый закругленный угол к содержащему div. Эти изображения перекрывают предоставленные браузером «призрачные углы» & создать иллюзию принадлежности к закругленному элементу.
Идея для входных данных заключается в том, чтобы сделать ту же логику. Тем не менее, input — это пустой элемент, «element пуст, он содержит только атрибуты», другими словами, вы не можете заключить диапазон во вход , например , чтобы затем использовать фоновые изображения, как в предыдущем примере.
Следовательно, похоже, что решение состоит в том, чтобы сделать наоборот: обернуть вход в другой элемент. см. этот ответ закругленные углы элементов ввода в IE
Как закруглить края блока в css
Существует несколько методов создания закругленных краев для блока. Рассмотрим несколько из них:
Решение 1: CSS3-свойство border-radius
Существует свойство border-radius, с помощью которого можно задать степень закругленности рамки вокруг блочного элемента. Это свойство будет включено в спецификацию CSS3, когда процесс ее разработки будет завершен. В настоящее время почти все браузеры поддерживает свойство border-radius , (Firefox 4.0+, Chrome4.0+, Safari 5.0+, Opera 10.5+, IE9+).
До этого разработчики Safari и Firefox реализовали экспериментальную поддержку такой возможности путем создания расширений, предназначенных для конкретных браузеров.
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
Данное решение будет работать в версиях Firefox 4.0+, Chrome4.0+, Safari 5.0+, Opera 10.5+, IE9+
Ниже приведен HTML- и CSS-код, а результат его обработки показан на рис. 9.21:
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> Закругление углов http-equiv="content-type" content="text/html; charset=utf-8" /> rel="stylesheet" type="text/css" href="corners1.css" /> class="curvebox"> Этот блок с закругленными углами радиусом 25 пикселов
.curvebox width: 250px; padding: 1em; background-color: #B0C4DE; color: #33527B; border-radius: 25px; >
Рис. 9.21. Блок с закругленными краями, созданными с помощью CSS
В этом примере был создан блок с закругленными краями без единого изображения! Эти аккуратные уголки были созданы благодаря использованию следующего свойства:
border-radius: 25px;
Если удалить это свойство из таблицы стилей, получим блок с обычными прямыми углами, как показано на рис. 9.22.
Точно так же блок будет отображен браузерами, не поддерживающими данное свойство.
Рис. 9.22. Вид блока в браузерах, не поддерживающих свойство border-radius
DEMO — если ваш браузер поддерживает свойство border-radius , вы увидите блок с закругленными углами.
Решение 2: использование изображений (с изменением разметки)
Желаемого результата можно добиться путем изменения HTML-кода документа и добавления нескольких изображений. При этом блок будет отображаться с закругленными краями в большинстве браузеров. Итак, прежде всего создадим изображения закругленных уголков в графической программе. Это проще всего сделать путем разделения круга на четверти, как показано на рис. 9.23. Каждый уголок будет представлен с помощью отдельного небольшого изображения.
Рис. 9.23. Изображения закругленных уголков
Ниже представлена разметка документа, в которую уже включены изображения верхнего и нижнего левого уголков, вложенные в верхний и нижний элементы div:
corners2.html
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> Закругление углов http-equiv="Content-Type" content="text/html; charset=utf-8" /> rel="stylesheet" type="text/css" href="corners2.css" /> class="rndbox"> class="rndtop"> src="img/topleft.gif" alt="" width="30" height="30" />
