Сделать круглые изображения - «Уголки» » Новости мира Интернет
«Момент, которого вы так долго ждали»: создатели Pioner открыли запись на закрытую «бету», но зарегистрироваться не так уж и просто - «Новости сети»
«Момент, которого вы так долго ждали»: создатели Pioner открыли запись на закрытую «бету», но зарегистрироваться не так уж и просто - «Новости сети»
Соцсеть X обновила принцип блокировки пользователей — многим это не понравилось - «Новости сети»
Соцсеть X обновила принцип блокировки пользователей — многим это не понравилось - «Новости сети»
Обновлённый PC Manager очистит диск от мусора с помощью нового алгоритма и не только - «Новости сети»
Обновлённый PC Manager очистит диск от мусора с помощью нового алгоритма и не только - «Новости сети»
На фоне надвигающегося сиквела продажи Kingdom Come: Deliverance взяли новую высоту - «Новости сети»
На фоне надвигающегося сиквела продажи Kingdom Come: Deliverance взяли новую высоту - «Новости сети»
Дебютировал электрический кроссовер Zeekr X 2025 — автономность на 420 км и 268 л.с. всего за $21 050 - «Новости сети»
Дебютировал электрический кроссовер Zeekr X 2025 — автономность на 420 км и 268 л.с. всего за $21 050 - «Новости сети»
Теперь клиники могут отвечать на отзывы пользователей о врачах — «Блог для вебмастеров»
Теперь клиники могут отвечать на отзывы пользователей о врачах — «Блог для вебмастеров»
Создан порошок с рекордным уровнем поглощения CO2 из воздуха - «Новости сети»
Создан порошок с рекордным уровнем поглощения CO2 из воздуха - «Новости сети»
Криптовалюты упали после сообщения о расследовании возможных нарушений при использовании Tether - «Новости сети»
Криптовалюты упали после сообщения о расследовании возможных нарушений при использовании Tether - «Новости сети»
Обнаружена уязвимость Windows, позволяющая откатывать обновления безопасности - «Новости сети»
Обнаружена уязвимость Windows, позволяющая откатывать обновления безопасности - «Новости сети»
Тайным получателем чипов TSMC для Huawei оказалась компания, связанная с китайской Bitmain - «Новости сети»
Тайным получателем чипов TSMC для Huawei оказалась компания, связанная с китайской Bitmain - «Новости сети»
Новости мира Интернет » Самоучитель 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

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

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



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