Как сделать круг в css?
2 ответа
Делаем круг в CSS так:
Для HTML создаем:
1 2 3 |
<body> <div id="circle"> </div> </body> |
Для CSS создаем:
1 2 3 4 5 6 |
#circle {
height: 100px;
width: 100px;
border-radius: 50px;
background-color: crimson;
}
|
@patrick.little
Чтобы создать круг в CSS, вы можете использовать свойство border-radius. Чтобы создать круг, нужно установить радиус скругления у всех углов одинаковым, например:
1 2 3 4 5 |
.circle { width: 100px; height: 100px; border-radius: 50%; } |
Это свойство может принимать значение в пикселях, процентах или единицах измерения em. Если вы хотите, чтобы круг был не полностью круглым, вы можете установить разные значения радиуса скругления для разных углов. Например:
1 2 3 4 5 |
.oval { width: 200px; height: 100px; border-radius: 100px/50px; } |
Это создаст эллипс, потому что радиус скругления по горизонтали будет больше, чем по вертикали. Вы также можете устанавливать разные значения радиуса скругления для каждого угла отдельно, используя свойства border-top-left-radius, border-top-right-radius, border-bottom-right-radius и border-bottom-left-radius.
Надеюсь, это помогло!