В процессе создания веб-страниц иногда нам может потребоваться добиться эффекта закругленных углов. Предыдущий метод заключался в том, чтобы разрезать проект дизайна на изображения, которые можно легко превратить в страницы, и использовать несколько фоновых изображений для достижения закругленных углов. После появления CSS3 таких проблем больше нет. CSS3 предоставляет ряд свойств для установки эффекта закругленных углов элементов, как показано ниже:
Необязательные значения вышеуказанных функций показаны в следующей таблице:
border-radius используется для реализации закругленных границ.
Пример:
<html><head><style>div{width:300px;height:300px;border:1pxsolidred;border-radius:20px;</style></head><body><div></div></ тело></html>Результаты запуска:
Но если я установлю радиус границы на 150 пикселей, граница станет круглой.
<html><head><style>div{width:300px;height:300px;border:1pxsolidred;border-radius:150px;</style></head><body><div></div></ тело></html>Результаты запуска:
Для удобства просто установите border-radius на 50%. Эффект тот же.
Но если вы хотите нарисовать круг, ширина и высота должны быть равны.
Фактически, после border-radius можно соединить несколько значений атрибута. Для значения атрибута, подобного приведенному выше, четыре угла по умолчанию будут соответствовать этому значению атрибута. Если четыре значения атрибута явно относятся к четырем углам, что такое относительный метод? Начиная с верхнего левого угла и двигаясь по часовой стрелке.
Пример:
<html><head><style>div{width:300px;height:300px;border:1pxsolidblack;background:rgb(0,162,255);border-radius:50px0px20px100px;</style></head><body><div ></div></body></html>Результаты запуска:
Например, нарисуем яйцо:
<html><head><style>div{width:80px;height:100px;border:1pxsolidblack;background:rgb(0,162,255);border-radius:40px40px40px40px/60px60px40px40px;</style></head><body> <div></div></body></html>Результаты запуска:
