Как закрасить блок в css

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

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

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

содержимое блока

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

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

style="border-radius: 100%;">

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

style="border: 20px solid #1b1b1b; border-radius: 20px; box-sizing: border-box;"</b>>

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

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

1	2	3
1.1	2.1	3.1
1.2	2.2	3.2

   1  2  3  
 
 1.1  2.1  3.1  
 1.2  2.2  3.2

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

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

внешний радиус = внутренний радиус + ширина рамки 47px = 32px + 15px

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

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

содержимое блока

Округление outline

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

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

HTML овал

  .radius .

HTML круг

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

 .radius .

HTML цилиндр

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

 .radius .

HTML полукруг

 .radius .

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/

class=»grayscale grayscale-fade»
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 вставил /*обесцвечивание круглой картинки */

ВОТ ЭТОТ СТИЛЬ, который ниже, РАБОТАЛ
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 А я увидела в исходном коде не точку, а «яЛП»

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

Как залить цветом слева и справа от блока до края экрана?

Макет фиксированной ширины посередине экрана. Необходимо для части блоков сделать горизонтальную заливку по бокам до краев экрана. Такое решение с псевдоэлементами вызывает горизонтальный скролл на ширину родительского элемента. Подскажите как сделать без скролла.

  .width < margin:0 auto; width:1300px;>.block < padding:10px 0; width:100%; background:#97cc64; position:relative;>.block:before, .block:after .block:before < right:100%>.block:after  Block content

Отслеживать
задан 14 мая 2017 в 8:41
41 1 1 серебряный знак 5 5 бронзовых знаков

Читать:

Ваз 2114 какой мотор

5 ответов 5

Сортировка: Сброс на вариант по умолчанию

Как по мне, проще сделать так:

.wrapper < background: linear-gradient(to left,#00364f 50%,#01a4a6 50%); >.content

Отслеживать
ответ дан 16 мая 2017 в 5:26
Музыка Сергей Музыка Сергей
524 3 3 серебряных знака 7 7 бронзовых знаков

С фиксированной шириной 1300px скрол будет в любом случае на экранах меньше 1300px. В данном случае можете попробовать для body

Отслеживать
ответ дан 14 мая 2017 в 9:19
Кулага Илья Кулага Илья
172 9 9 бронзовых знаков

Спасибо за ответ, сейчас этот костыль стоит. Из-за этого яндекс не признает сайт адаптивным. Техподдержка пишет что на iPhone 5 горизонтальный скролл

14 мая 2017 в 9:53
Попробуй заменить width на max-width
14 мая 2017 в 9:57
Тогда исчезают псевдоэлементы
14 мая 2017 в 10:01
пример jsfiddle.net/soledar10/vb60ys5c — max-width + псевдоэлементы = работает
8 окт 2018 в 6:23

Можно, если высота блока известна и фиксирована.

* < padding: 0; margin: 0; >body < height: 100vh; display: flex; >div < height: 200px; width: 300px; margin: auto; position: relative; background-color: #afa; >div::after

Второй вариант, если высота неизвестна + адаптивность (смотреть на полном экране):

* < padding: 0; margin: 0; >.first < background-color: red; >.second < background-color: green; >.third < background-color: blue; >.container

   Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 
 
   Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
 
 
   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Как закрасить отступы margin ?

есть главный блок, он закрашен фоном. Далее в этом боке создаю еще один и назначаю ему отступ margin-left: 20px; Но при просмотре в опере или ie7(на других пока не смотрел) пропадает часть фона как раз на ширину отступа.

Как уколоть эту ошибку?

Ссылка на комментарий

Поделиться на других сайтах

Больше способов поделиться.

19 ответов на этот вопрос

Сортировать по голосам
Сортировать по дате

Присоединяйтесь к обсуждению

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

HTML: Боковая панель

Большинство сайтов имеют боковую панель или, как её ещё называют, сайдбар. Он служит для отображения информации, которая дополняет основной текст, но не является обязательной. Чаще всего это меню раздела, список определений из статьи, виджеты и т.д.

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

 
  Главная
  О нас
  Контакты


  Услуга 1
  Услуга 2
  Услуга 3

Основной контент страницы. Это может быть статья, описание услуги, данные на странице контакты
Оставить заявкуЧитайте такжеУслуга 2Описание новой услуги
Ссылка на услугу
Услуга 3Описание новой услуги
Ссылка на услугу
Услуга 4Описание новой услуги
Ссылка на услугу

Обратите внимание, что содержится вне тега . Этот контент не обязан быть уникальным на каждой странице. Он может быть уникальным для каждого конкретного раздела (если речь идёт, например, о меню). Если боковая панель уникальна для каждой страницы, то она должна быть расположена внутри тега .

Задание

Создайте шапку сайта. Она состоит из 2-х элементов:

Логотип
Секция навигации. Внутри неё маркированный список из двух элементов

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

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

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет ��

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

Мой код отличается от решения учителя ��

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

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

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Полезное

Хоть мы и говорили про боковую панель, но aside обозначает дополняющую область. При этом, зачастую, визуально она выглядит как боковая панель