CSS-элементы с закругленными углами для Weebly »WebNots

Создать элемент с закругленными углами с помощью CSS очень просто, и большинство конструкторов сайтов по умолчанию предлагают эту функцию для демонстрации ваших изображений, кнопок и текстовых полей, чтобы они имели желаемый закругленный угол. Weebly не предлагает способ управления закругленными углами элемента, и, насколько мы проверили, большинство тем Weebly имеют очень четкие изображения и элементы кнопок. В этой статье мы объясним, как сделать элементы CSS с закругленными углами для сайта Weebly.

Что такое закругленный угол?

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

Закругленный угол достигается путем определения свойства «border-radius» с помощью CSS для любых элементов, таких как изображения, кнопки, текстовые поля и т. Д.

Создание изображений с закругленными углами в Weebly

Хотя изображения используются как отдельные элементы, продукты, галереи и слайд-шоу, свойство изображения контролируется с помощью класса img CSS. Если ваша тема не имеет свойства border-radius, добавленного к классу img в main_style.css, то изображения не будут иметь закругленных углов.

Чтобы сделать углы изображения закругленными, добавьте следующий код CSS в файл «main_style.css»:

.img {
border-radius:10px;
}

Это сделает все изображения, включая те, которые используются в логотипе, галерее, продуктах и ​​слайд-шоу, с радиусом границы 10 пикселей по всем четырем углам. Вы также можете исключить радиус границы только для изображений на определенных элементах, указав радиус границы равным 0. Например, если вы не хотите, чтобы у логотипа был закругленный угол, добавьте «border-radius: opx» в «.wsite». -logo img »в основной таблице стилей. Вот как это может выглядеть:

.wsite-logo img {
max-height: 70px; /* This is an existing line */
border-radius: none !important; /* This is a line to remove the rounded corner */
}

Если вы хотите управлять разным радиусом для разных углов, используйте следующий код:

img {
border-radius: 10px 8px 15px 12px;
}

Это приведет к тому, что изображение будет иметь различный радиус границы в следующем порядке — вверху (10 пикселей), справа (8 пикселей), внизу (15 пикселей) и слева (12 пикселей).

Если вы хотите контролировать радиус границ изображений, загружаемых только на одной странице, добавьте код CSS в раздел заголовка страницы на вкладке «Страницы» в