Делаем круг в 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
.
Надеюсь, это помогло!