Сделать круглые изображения - «Уголки» » Новости мира Интернет
Первая за 11 лет новая книга Анджея Сапковского из цикла «Ведьмак» получила название «Перекрёсток воронов» — первые подробности - «Новости сети»
Первая за 11 лет новая книга Анджея Сапковского из цикла «Ведьмак» получила название «Перекрёсток воронов» — первые подробности - «Новости сети»
Роскомнадзор с декабря начнёт блокировать сайты за публикацию научной информации о VPN - «Новости сети»
Роскомнадзор с декабря начнёт блокировать сайты за публикацию научной информации о VPN - «Новости сети»
Миллионер с зарплатой сантехника: выяснилось, сколько зарабатывает глава OpenAI - «Новости сети»
Миллионер с зарплатой сантехника: выяснилось, сколько зарабатывает глава OpenAI - «Новости сети»
SpaceX рассказала, почему затопила ракету Super Heavy во время последнего запуска Starship - «Новости сети»
SpaceX рассказала, почему затопила ракету Super Heavy во время последнего запуска Starship - «Новости сети»
Представлена технология охлаждения чипов светом — секретная и только по предварительной записи - «Новости сети»
Представлена технология охлаждения чипов светом — секретная и только по предварительной записи - «Новости сети»
Google намерена превратить ChromeOS в Android - «Новости сети»
Google намерена превратить ChromeOS в Android - «Новости сети»
Пользователи iPhone 16 стали слышать чужие голоса из динамиков - «Новости сети»
Пользователи iPhone 16 стали слышать чужие голоса из динамиков - «Новости сети»
Samsung придумала, как сделать смартфоны тоньше — представлена перископическая камера ISOCELL ALoP - «Новости сети»
Samsung придумала, как сделать смартфоны тоньше — представлена перископическая камера ISOCELL ALoP - «Новости сети»
Nike выпустила кроссовки, почти полностью напечатанные на 3D-принтере - «Новости сети»
Nike выпустила кроссовки, почти полностью напечатанные на 3D-принтере - «Новости сети»
Китайские производители памяти захватывают рынок, предлагая DDR4 за полцены - «Новости сети»
Китайские производители памяти захватывают рынок, предлагая DDR4 за полцены - «Новости сети»
Новости мира Интернет » Самоучитель CSS » Скруглённые уголки » Сделать круглые изображения - «Уголки»
Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 4.0+ 11.60+ 5.0+ 4.0+ 2.1+ 2.0+

Задача

Превратить изображения в круг и добавить вокруг них рамку.

Решение

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

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

Пример 1. Круглые изображения

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Круглые изображения</title>
  <style>
   .round {
    border-radius: 100px; /* Радиус скругления */
    border: 3px solid green; /* Параметры рамки */
    box-shadow: 0 0 7px #666; /* Параметры тени */
   
  </style>
 </head>
 <body>
   <p><thumb src="images/thumb1.jpg" alt="" class="round">
      <thumb src="images/thumb2.jpg" alt="" class="round">
      <thumb src="images/thumb3.jpg" alt="" class="round"></p>
 </body>
</html>

Результат данного примера в Opera показан на рис..;1.

.;


Рис. 1. Круглые изображения

Браузеры Chrome и Safari некорректно отображают скруглённые уголки, что выглядит довольно некрасиво (рис. 2).

.;


Рис. 2. Рамка в браузере Chrome

Здесь можно посоветовать только отказаться от рамки вообще или заменить border на свойство box-shadow. Вспоминаем, что оно может давать не только размытую тень, но и тень с резкими краями. К тому же box-shadow одновременно допускает наличие нескольких теней, параметры которых перечисляются через запятую. Таким образом, первая тень будет формировать рамку, а вторая добавлять затемнение. В примере.;2 показан изменённый стиль, решающий проблему в Chrome с обрамлением.

Пример 2. Рамка из тени

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Круглые изображения</title>
  <style>
   .round {
    border-radius: 100px; /* Радиус скругления */
    box-shadow: 0 0 0 3px green, 0 0 13px #333; /* Параметры теней */
   
  </style>
 </head>
 <body>
   <p><thumb src="images/thumb1.jpg" alt="" class="round">
      <thumb src="images/thumb2.jpg" alt="" class="round">
      <thumb src="images/thumb3.jpg" alt="" class="round"></p>
 </body>
</html>

Результат данного примера показан на рис..;3.

.;


Рис. 3. Рамка в браузере Chrome

Заметьте, что изображения теперь плотно прилегают друг к другу, для добавления пространства между ними примените свойство margin.


Internet Explorer Chrome Opera Safari Firefox Android iOS 9.0 4.0 11.60 5.0 4.0 2.1 2.0 Задача Превратить изображения в круг и добавить вокруг них рамку. Решение Для скругления уголков у элементов в CSS3 предназначено свойство border-radius, значением которого выступает радиус закругления. Если взять квадратное изображение и добавить к нему это свойство, то мы получим уже не квадратное, а круглое изображение. В качестве значения следует задать половину ширины рисунка. Правда, можно поступить и проще и значением указать заведомо большое число, превышающее размеры изображения. Так мы в любом случае получим круглую картинку и сможем применять стиль к изображениям разного размера. Плюсом использования border-radius является то, что мы можем добавлять в стилях к элементу рамку, тень и она будет повторять контур. В примере 1 показано создание круглых изображений, для чего вводится класс round, с тенью и рамкой. Пример 1. Круглые изображения HTML5 CSS3 IE Cr Op Sa Fx

Смотрите также

А что там на главной? )))



Комментарии )))