Bu blog tartışacak:

• Anahat Yarıçapı nedir?
• Anahat Yarıçap Efekti HTML Öğesine Nasıl Uygulanır?

Anahat Yarıçapı nedir?

“ anahat ” özelliği, öğenin ana hatlarını şekillendirmek için kullanılır, ancak doğrudan uygulanamaz. Bu nedenle, yarıçap efektini bir dış hatta uygulamak için alternatif bir yöntem “ sınır yarıçapı ” CSS özelliği. Ana hatlar için yuvarlatılmış köşeleri belirtir.

Anahat Yarıçap Efekti HTML Öğesine Nasıl Uygulanır?

Ana hat yarıçapı özelliğini kullanmak için verilen talimatları uygulayın.

1. Adım: Başlıkları Yerleştirin

Başlangıçta, '' dan herhangi bir başlık etiketi kullanarak başlıkları gömün.

' ile '

”. Örneğin, “

' ve '

” etiketleri, bir HTML belgesine iki farklı başlık eklemek için kullanılır.

2. Adım: İlk div Kapsayıcısını Ekleyin

Bundan sonra, “ kullanarak bir kapsayıcı ekleyin.

' etiket. Ayrıca, “ sınıf ” niteliğini seçin ve seçiminize göre sınıfın adını belirtin.

---

---

3. Adım: İkinci div Kabı Oluşturun

Başka bir tane yarat ' div ” aynı prosedürü takip ederek kapsayıcı:

< h1 stil = 'renk:rgb(48, 10, 218)' > Linuxhint LTD İngiltere < / h1 >

< h2 >

Bir anahat dairesinin köşelerini oluşturmak için border-radius için farklı örnekler.

< / h2 >

< div sınıf = 'kutu1-div' >

Linuxhint, kullanıcıları için en iyi ve en benzersiz içeriği sağlar.

< / div >

< div sınıf = 'kutu2-div' >

Birden çok kategoride çalışır.

< / div >

Yukarıdaki kodun çıktısı aşağıda gösterilmiştir:

4. Adım: İlk Kapsayıcının Ana Hatlarını Belirleyin

“ Kullanarak ilk kaba erişin. .box1-div ' sınıf nerede ' . ”, sınıfa erişmek için bir seçicidir:

.box1-div {

anahat : sağlam ;

Genişlik : 300 piksel ;

dolgu malzemesi : 15 piksel ;

marj : 25 piksel ;

}

Ardından, aşağıda listelenen CSS özelliklerini uygulayın:

• “ anahat ” özelliği, öğenin çevresine bir anahat eklemek için kullanılır. Örneğin, değeri “ olarak ayarlanmıştır. sağlam ”.
• “ Genişlik ”, elemanın boyutunu yatay olarak belirtir.
• “ dolgu malzemesi ”, elemanın içeriği etrafındaki alanı tahsis etmek için kullanılır.
• “ marj ” öğe sınırının dış tarafındaki boşluğu belirtin.

Adım 5: İkinci Kabın Anahatlarını Belirleyin

Şimdi, ilgili sınıfın yardımıyla ikinci öğeye erişin ' .box2-div ”:

.box2-div {

anahat : sağlam ;

sınır yarıçapı : 20 piksel ;

Genişlik : 300 piksel ;

dolgu malzemesi : 15 piksel ;

marj : 25 piksel ;

}

CSS özelliğini uygulayın ' sınır yarıçapı ” öğesinin yarıçapını tanımlamak için. Bu özellik, öğenin etrafına yuvarlatılmış köşeler eklemenizi sağlar:

Ana hat yarıçapı efektini HTML öğesine başarıyla eklediğimiz fark edilebilir.

Çözüm

“ dış hat yarıçapı ' artık kullanılabilir değil. Kullanıcılar, anahat yarıçapı özelliklerini CSS 'anahat' ve 'kenarlık yarıçapı' özelliklerinin yardımıyla uygulayabilir. “ anahat ” öğesinin çevresine bir ana hat ekler ve “ sınır yarıçapı ” özellikle taslağı şekillendirmek için kullanılır. Bu gönderi, HTML'deki öğenin çevresine ana hat yarıçapı efekti ekleme talimatlarını gösterdi.