Блог учителя физики
пятница, 10 апреля 2015 г.
Закругление углов
Закругление углов изображения без ФШ
Закруглять будем с помощью HTML кода + свойство CSS border-radius.
<img src="АДРЕС ИЗОБРАЖЕНИЯ" style="border-radius: width: ШИРИНА ИЗОБРАЖЕНИЯpx; height: ВЫСОТА ИЗОБРАЖЕНИЯpx; border: 3px solid red; border-radius: 100%;" />
Так выглядит код картинки — HTML овал (для прямоугольных изображений):
< img src="https://img-fotki.yandex.ru/get/16129/163781271.f8/0_
f121c_96424eec_L.jpg" style="border-radius: width: 430px; height: 280px;
border: 3px solid red; border-radius: 100%;"/>
Рассмотрим обозначения. Для наглядности они выделены разными цветами.
Красный (алый) — адрес изображения.
Зелёный — ширина (width) и высота (height) изображения.
Голубой — толщина обводки вокруг изображения.
Синий — стиль обводки вокруг изображения.
Оранжевый — цвет обводки вокруг изображения.
Сиреневый — радиус закругления углов.
Все коды, представленные далее, идентичны.
В них меняются те же значения, которые я расписала в коде — HTML овал.
HTML обычное скругление углов
HTML полукруг
HTML круг
HTML цилиндр
HTML капля (скругленные три края)
HTML яйцо (для изображений, где высота больше ширины)
В работе использованы иллюстрации художника Льва Бартенева.
Про свойства стилей, которые являются обводкой (рамкой) для изображений (точечная, пунктирная, двойная линия и т. д.) я писала здесьРамка вокруг изображения
<img src="АДРЕС ИЗОБРАЖЕНИЯ" style="border-radius: width: ШИРИНА ИЗОБРАЖЕНИЯpx; height: ВЫСОТА ИЗОБРАЖЕНИЯpx; border: 3px solid red; border-radius: 100%;" />
Так выглядит код картинки — HTML овал (для прямоугольных изображений):
< img src="https://img-fotki.yandex.ru/get/16129/163781271.f8/0_
f121c_96424eec_L.jpg" style="border-radius: width: 430px; height: 280px;
border: 3px solid red; border-radius: 100%;"/>
Рассмотрим обозначения. Для наглядности они выделены разными цветами.
Красный (алый) — адрес изображения.
Зелёный — ширина (width) и высота (height) изображения.
Голубой — толщина обводки вокруг изображения.
Синий — стиль обводки вокруг изображения.
Оранжевый — цвет обводки вокруг изображения.
Сиреневый — радиус закругления углов.
Все коды, представленные далее, идентичны.
В них меняются те же значения, которые я расписала в коде — HTML овал.
HTML обычное скругление углов
HTML полукруг
HTML круг
HTML цилиндр
HTML капля (скругленные три края)
HTML яйцо (для изображений, где высота больше ширины)
В работе использованы иллюстрации художника Льва Бартенева.
Про свойства стилей, которые являются обводкой (рамкой) для изображений (точечная, пунктирная, двойная линия и т. д.) я писала здесьРамка вокруг изображения
Подписаться на:
Сообщения (Atom)