CSS'de circle Nedir?

Circle (daire) CSS'de bir şekil türüdür. Bu şekil, border-radius özelliği kullanılarak oluşturulur. Bu özellik, bir HTML elemanının kenarlarına yuvarlak köşeler ekler. Circle (daire) şeklini elde etmek için, border-radius değeri genişliğin yarısına eşit olacak şekilde ayarlanır.
İşte örnek bir circle şeklini oluşturmak için kullanabileceğiniz CSS kodu:
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
}
Bu kod, 100 piksel genişliğinde ve yüksekliğinde bir daire şeklinde bir eleman oluşturur ve kırmızı bir arka plana sahiptir. border-radius özelliği, köşeleri yuvarlatmak için kullanılır ve burada 50% olarak tanımlanarak daire şekli elde edilir.
Bir başka örnekte, circle şeklini bir butonun arka planında kullanmak istiyor olabilirsiniz. İşte bunu yapmak için kullanabileceğiniz CSS kodu:
.button {
width: 150px;
height: 50px;
border-radius: 25px;
background-color: blue;
color: white;
font-size: 20px;
text-align: center;
line-height: 50px;
}
Bu kod, 150 piksel genişliğinde ve 50 piksel yüksekliğinde bir buton oluşturur ve mavi bir arka plana sahiptir. Border-radius değeri burada 25 piksel olarak ayarlanır, böylece buton dairemsi bir şekil alır. Butonda beyaz renkli yazı, 20 piksel boyutunda bir font ve ortalanmış hizalama yer alır. line-height özelliği, butonun içindeki metnin dikey hizalamasını ayarlar.
Bu şekilde circle şeklini CSS'de kullanabilirsiniz. Daire şekilli arka planlar, butonlar veya diğer HTML elemanları için kullanılabilir ve tasarımınızda daha ilgi çekici bir etki yaratabilir.