Yuvarlatılmış köşeler. CSS kullanarak yuvarlatılmış köşeler

boyut 200×200 piksel:

Ayrıca bir öğenin yalnızca üst veya alt köşeleri için yuvarlatılmış kenarlar yapabilir veya her köşeye farklı bir yuvarlama yarıçapı verebilirsiniz; hayal gücü için çok yer var! Örnek:

BorderElement ( arka plan rengi: #EEDDFF; kenarlık: 6 piksel katı #7922CC; kenarlık yarıçapı: 25 piksel; ) .borderElement1 ( arka plan rengi: #FFE8DB; kenarlık: 6 piksel katı #FF5A00;

Ama hepsi bu değil: basit yerine yuvarlak köşeler eliptik bir yuvarlama tanımlayabilirsiniz. Bunu yapmak için eğik çizgiyle ayrılmış iki değer belirtmeniz gerekir (elipsin yatay ve dikey yarı eksenleri için). İşte 150×450 piksellik bir blokta bir örnek:

BorderElement ( arka plan rengi: #EEDDFF; kenarlık: 6px katı #7922CC; kenarlık yarıçapı: 280px/100px; )

Değerler karıştırılabilir (yani aynı tarzda hem normal hem de eliptik yuvarlama kullanılabilir), ayrıca uygun özellikleri kullanarak her köşeye kişisel bir stil ekleyebilirsiniz:

• border-top-left-radius - sol üst köşe için;
• border-top-right-radius - sağ üst köşe için;
• kenarlık-alt-sol-yarıçap - sol alt köşe için;
• border-bottom-right-radius - sağ alt köşe için.

Köşe yuvarlama prensibi

Aşağıdaki resim CSS'de köşe yuvarlamanın nasıl hesaplandığını göstermektedir. Örneğin, köşe tek bir değere (örneğin 20 piksel) ayarlanmışsa bu, yuvarlamanın yarıçapı 20 piksel olan bir daire üzerinde gerçekleşeceği anlamına gelir. İki değerin eğik çizgiyle ayrılmış olarak belirtilmesi durumunda, örneğin 30px/20px, köşeler bir elips şeklinde yuvarlanacaktır. Bu durumda ilk değer, elipsin yatay yarı ekseninin uzunluğu - 30 piksel ve ikinci değer, dikey yarı eksenin uzunluğu - 20 pikseldir:

CSS border-radius özelliği tüm modern tarayıcılar tarafından desteklenir.

CSS3 çerçevesi izin veren özelliklerle öğe sınırlarının biçimlendirme yeteneklerini genişletir yuvarlak köşeleröğesi ve ayrıca kullanın Görüntüler Bir öğenin kenarlıklarına stil vermek için.

Yuvarlatılmış köşeler ve resim çerçeveleri

1. Kenar yarıçaplı köşelerin yuvarlatılması

Tarayıcı Desteği

yani: 9.0
Firefox: 4.0
Krom: 4.0
safari: 5.0, 3.1 -web kiti-
opera: 10.5
iOS Safari'si: 7.1
Opera Mini: —
Android Tarayıcı: 4.1
Krom Android için: 44

Bu özellik, satır içi ve blok elemanların köşelerini yuvarlamanıza olanak tanır. Her köşenin eğrisi, şeklini tanımlayan bir veya iki yarıçapla tanımlanır. daire veya elips. Yarıçap, arka planın tamamına uzanır, öğenin kenarlığı olmasa bile, sekantın tam konumu, arka plan klip özelliği kullanılarak belirlenir.

border-radius özelliği, tüm köşeleri aynı anda yuvarlamanıza olanak tanır ve border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left- özelliklerini kullanarak yarıçapı her köşeyi ayrı ayrı yuvarlayabilirsiniz.

border-radius özelliği için iki değer ayarlarsanız ilk değer yuvarlanır Sol üst Ve sag alt köşe ve ikincisi sağ üst Ve sol alt.

/define aracılığıyla verilen değerler yatay Ve dikey yarıçap. Mülkiyet miras alınmaz.

Seçenekler

Div (genişlik: 100 piksel; yükseklik: 100 piksel; kenarlık: 5 piksel katı;) .r1 (kenarlık yarıçapı: 0 0 20 piksel 20 piksel;) .r2 (kenarlık yarıçapı: 0 10 piksel 20 piksel;) .r3 (kenarlık yarıçapı: 10 piksel 20 piksel) ;) .r4 (kenarlık yarıçapı: 10px/20px;) .r5 (kenarlık yarıçapı: 5px 10px 15px 30px/30px 15px 10px 5px;) .r6 (kenarlık yarıçapı: 10px 20px 30px 40px/30px;) .r7 ( border-radius: %50;) .r8 (kenarlık-üst: yok; border-bottom: yok; border-yarıçap: 30px/90px;) .r9 (kenarlık-alt-sol-yarıçap: 100px;) .r10 (kenarlık -yarıçap: 0 100%;) .r11 (kenarlık yarıçapı: 0 50% 50% 50%;) .r12 (kenarlık-sol-üst-yarıçap: 100% 20px; kenarlık-alt-sağ-yarıçap: 100% 20px ;)
Pirinç. 1. Bloğun köşelerini yuvarlamak için farklı seçeneklere örnekler

2. sınır resmi

Tarayıcı Desteği

yani: 11.0
Firefox: 15,0, 3,5 -moz-
Krom: 16.0, 7.0 -web kiti-
safari: 6.0, 3.0 -web kiti-
opera: 15.0, 11.0 -o-
iOS Safari'si: 7.1
Opera Mini: 8-o-
Android Tarayıcı: 4.4, 4.1 -webkit-
Android için Chrome: 42

Özellik, bir görüntüyü bir öğenin kenarlığı olarak ayarlamanıza olanak tanır. Görüntünün temel şartı simetrik olmasıdır. Mülk şunları içerir: aşağıdaki değerler: (border-image: genişlik kaynak dilim tekrar başlangıcı;) .

Böyle bir yardımla basit resim eleman için bu çerçeveleri alabilirsiniz.

/* Örnek 1 */ div ( genişlik: 260px; yükseklik: 100px; border-style: katı; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30 ; border-image-repeat: Stretch; ) /* Örnek 2 */ div ( width: 260px; height: 100px; border-style: katı; border-image-width: 15px; border-image-source: url(border_round. png); border-image-slice: 30; border-image-repeat: yuvarlak; )
Pirinç. 2. Bir görüntü kullanarak blok sınırlarını tasarlama örneği

A - B - C - D dilimleri çerçevenin köşelerini oluşturur ve görüntünün aralarındaki kısmı border-image-repeat özelliğinin değerine göre çerçevenin kalan alanını doldurur. Köşe boyutu (inç bu örnek bu sayı 30'dur) border-image-slice özelliğinin değeriyle belirtilir.

2.1. kenarlık-resim-genişliği

Özellik, öğenin kenarlığının görüntü genişliğini ayarlar. Genişlik belirtilmezse varsayılan olarak 1 olur.

kenarlık-resim-genişliği
Değerler:
uzunluk	Çerçevenin genişliğini uzunluk birimleri (px / em) cinsinden ayarlar. Aynı anda birden dörde kadar değer ayarlayabilirsiniz. Bir değer verilirse çerçevenin tüm kenarlarının genişliği aynıdır, iki değer üst-alt ve sağ-sol genişliğini vb. belirtir.
sayı	Kenarlık genişliği değerinin çarpıldığı sayısal değer.
%	Elemanın çerçevesinin genişliği görüntünün boyutuna göre hesaplanır. Genişliğe göre yatay, yüksekliğe göre dikey.
Oto	Border-image-slice değerine karşılık gelir.
ilk
miras almak

Sözdizimi

Div (kenarlık-görüntü-genişliği: 30 piksel;) 3. Çerçeve görüntüsünün genişliğini kullanarak ayarlama örneği çeşitli türler değerler

2.2. kenarlık-görüntü-kaynağı

Özellik, bloğun sınırlarını süslemek için kullanılacak görüntünün yolunu belirtir.

Sözdizimi

Div (kenarlık-resim-kaynağı: url(border.png);)

2.3. kenarlık-görüntü dilimi öğeleri

Bu özellik, öğenin kenarlarını süslemek için kullanılan görüntünün parçalarının boyutunu belirler ve görüntüyü dokuz parçaya böler: dört köşe, köşeler arasında dört kenar ve bir orta kısım.

Değerler:
sayı	Çerçeve parçaları bir, iki, üç veya dört değer kullanılarak boyutlandırılabilir. Bir değer, öğenin her bir tarafı için aynı boyuttaki sınırları ayarlar. İki değer: birincisi üst ve alt kenarlıkların boyutunu, ikincisi ise sağ ve sol kenarları belirler. Üç değer: birincisi üst kenarlığın boyutunu, ikincisi sağ ve sol ve üçüncüsü alt kenarlığın boyutunu belirler. Dört değer: Üst, sağ, alt ve sol kenarlıkların boyutunu belirtir. Sayısal değer piksel sayısını temsil eder.
%	Kenarlık boyutları görüntü boyutuna göre hesaplanır. Genişliğe göre yatay, yüksekliğe göre dikey.
doldurmak	Değer, bir sayı veya yüzde değeriyle birlikte belirtilir. Ayarlanırsa görüntü çerçevenin iç kenarından kırpılmaz, aynı zamanda çerçevenin içindeki alanı da doldurur.
ilk	Bu özelliği varsayılan değerine ayarlar.
miras almak	Bu özelliğin değerini üst öğeden devralır.

Sözdizimi

Div (kenarlık-görüntü dilimi: 50 20;)
Pirinç. 4. Görüntü çerçevesi dilimlerini ayarlama örneği

2.4. kenarlık-görüntü-tekrar

Özellik, arka plan görüntüsünün çerçevenin köşeleri arasındaki boşluğu nasıl doldurduğunu kontrol eder. Tek bir değerle veya bir çift değerle ayarlanabilir.

Sözdizimi

Div (kenarlık-görüntü-tekrar: tekrar;) 5. Bir görüntü çerçevesinin orta kısmının farklı değer türleri kullanılarak tekrarlanmasına bir örnek

2.5. sınır-görüntü-çıkış

Özellik, görüntü çerçevesini belirtilen uzunluk kadar öğenin sınırlarının dışına taşımanıza olanak tanır. Bir veya dört değer kullanılarak ayarlanabilir.

Sözdizimi

Div (kenarlık-görüntü-çıkış: 10px;)
Pirinç. 6. Farklı değer türlerini kullanarak çerçeve görüntüsünü kaydırmaya bir örnek

3. Dış çerçeve uzaklığı anahat uzaklığı

Özellik, öğenin kenarlığı ile anahat özelliğiyle oluşturulan dış kenarlık arasındaki mesafeyi belirtir.

/*Şekil 1:*/ img ( border: 1px katı pembe; anahat: 1px kesikli gri; anahat-ofseti: 3px; ) /*Şekil 2:*/ img ( border-width: 1px 10px; border-style: katı; kenarlık rengi: pembe; anahat: 1 piksel kesikli gri; anahat uzaklığı: 3 piksel; ) /*Şekil 3:*/ img ( kenarlık: 3 piksel iç metin pembe; anahat: 1 piksel kesikli gri; anahat uzaklığı: 1 piksel; )
Pirinç. 7. Bir görüntüyü dış çerçeveyle dekore etme örneği

4. Degrade çerçeve

border-image'in değeri yalnızca bir görüntü değil aynı zamanda degrade dolgusu da olabilir.

Yarı saydam çerçeve

Renklerden biri şeffaftır. Bu şekilde bir elemanın tüm kenarları için sınırları aynı anda veya her bir kenar için ayrı ayrı ayarlayabilirsiniz. Kenarlık genişliği border-width özelliği tarafından kontrol edilir.

* (kutu boyutlandırma: kenarlık kutusu;) .wrap ( yükseklik: 200 piksel; dolgu: 25 piksel; arka plan: #00E4F6; ) .gradient ( yükseklik: 150 piksel; genişlik: %50; kenar boşluğu: 0 otomatik; kenarlık: 10 piksel katı şeffaf ; border-image: lineer-gradient(sağa, şeffaf %0, #ADF2F7 %100); border-image-slice: 1; )

Posta zarfı

* (kutu boyutlandırma: kenarlık kutusu;) .wrap ( yükseklik: 200 piksel; dolgu: 25 piksel; ) .gradient ( yükseklik: 150 piksel; genişlik: %50; kenar boşluğu: 0 otomatik; kenarlık: 10 piksel katı şeffaf; kenarlık resmi: 10 tekrarlanan-doğrusal-gradyan(45deg, #A7CECC, #A7CECC 10px, şeffaf 10px, şeffaf 20px, #F8463F 20px, #F8463F 30px, şeffaf 30px, şeffaf 40px); )

Yuvarlatılmış köşeler CSS'de CSS 3, HTML öğelerinde köşelerin yuvarlatılmasına izin veren yeni özellikler getirdiği için bunlardan bazıları artık geçerliliğini yitirmiş sayılabilir. Ancak, öncelikle eski tarayıcılar bu özellikleri desteklemiyor ve ikincisi, bazen tasarımcının yaratıcı beyninde yalnızca eski yöntemlerin kurtarabileceği türden fikirler doğuyor. Bu nedenle, burada CSS'de köşeleri yuvarlatmak için birkaç farklı seçeneğe bakacağız: en basitinden en karmaşıkına.

Bu örneklerde başlangıçtaki blok elemanların köşeleri yuvarlatılmış olup bazı örneklerde bu bloklar yardımcı eleman olarak kullanılmaktadır. Ancak aynı şeyi satır düzeyindeki öğelerle, gerekirse ilk önce blok veya satır içi blok olarak ayarlayarak kolayca yapabileceğinizi unutmayın.

CSS 3'te görseller olmadan yuvarlatılmış köşeler

Bu örnekte, görüntülerin yardımı olmadan köşeleri yuvarlamayı kolaylaştıran CSS 3'ün özellikleri kullanılmaktadır.

HTML ve CSS örneği: köşeleri yuvarlama CSS kullanma 3 resim yok

Örneğin açıklaması

1. Köşeleri yuvarlamak için tüm modern tarayıcıların anladığı CSS 3 özelliğini kullanıyoruz.
2. Eski için Firefox tarayıcıları, Chrome ve Safari, ana özellik desteklenmeden önce tanıttıkları -moz- ve -webkit- önekleriyle özel özellikleri kullanır. Ne yazık ki eski Opera ve IE için benzer analoglar yok. Karmaşık turlar oluştururken ön ekli özelliklerin düzgün çalışmayabileceğini lütfen unutmayın. Bu nedenle CSS kodunda bunlar ana özellikten daha yukarıda listelenmiştir. stil öncelikleri, zaten "saf" ifadesini anlayan tarayıcılar bunu kullandı.

Ön ekli özellikler CSS spesifikasyonunda yer almadığından bunların kullanılması geçersiz kodla sonuçlanacaktır.

Görüntüler olmadan CSS'de yuvarlatılmış köşeler

Bu örnekte de resim yok ancak ek bloklar kullanılıyor. Yöntemin özü, ana içerikten önce ve sonra, yan dış kenar boşluklarının yardımıyla, ondan uzaklaştıkça genişliği yavaş yavaş azalan birkaç bloğun belirtilmesidir. Bu sayede köşelerin yuvarlatılmasının taklidi meydana gelir.

Bu yöntem kötüdür çünkü kod ek bloklarla "doldurulur", ancak ne yazık ki birçok örnekte bu tür bloklar mevcut olacaktır. Diğer bir dezavantaj ise büyük yuvarlama yarıçaplarında örnekte kullanılandan daha fazla blok eklemeniz gerekmesidir.

HTML ve CSS örneği: görselleri kullanmadan köşeleri yuvarlama

Örneğin açıklaması

1. class= "block" ile bloğun içinde ana içerik için öğeyi ("content_block") belirleriz ve bunun önüne köşelerin yuvarlatılmasını simüle etmek için bloklar koyarız ("b1", "b2", "b3"). Ondan sonra onları aynı ama ters sıraya koyarız.
2. Köşelerin görünümünü oluşturmak için gerekli yüksekliği ve yan kenar boşluklarını (CSS) simüle edecek şekilde blokları ayarladık. Ayrıca yazı tipi boyutunu (CSS) sıfırladık ve :hidden ayarını yaptık - bu, yüksekliği artırabilen ve belirtilenden daha fazla hale getirebilen eski tarayıcılar için tasarlanmıştır.
3. Bu örnekte, köşeleri yuvarlatmanın yanı sıra, çerçevenin bir taklidi de eklenmiştir; ihtiyacınız yoksa, öğelerden tüm "kenarlıkları" kaldırın ve "b3" bloğundan arka plan rengini kaldırın. .

CSS'de yuvarlatılmış köşeleri görünür kılmanın en kolay yolu, bir öğenin arka planı olarak bir görüntüyü kullanmaktır. Bu durumda öğenin boyutları genellikle arka plan görüntüsünün boyutuyla aynı şekilde belirtilir. Bu yöntemin dezavantajı, öğenin içeriğinin kapsamının dışına çıkmaması, yani belirli bir sınırlı boyutta olması gerektiğidir.

HTML ve CSS Örneği: Tek Bir Görüntü Kullanarak Köşeleri Yuvarlama

Örneğin açıklaması

1. CSS özelliğini kullanarak, arka plan resmini dikey ve yatay olarak çoğaltılmasını yasakladığımız (tekrarlamasız) bloğa ayarlıyoruz, çünkü bu durum gerekli değildir.
2. Bloğun içindeki metnin kenarlarına yapışmaması için iç dolgusunu (CSS) her iki tarafa 5 piksel ayarladık.
3. Daha sonra bloğu arka planla aynı boyuta ayarlamanız gerekir. Arka plan resmimiz 140x32 piksel boyutlarındadır ancak bloğun genişliğini (CSS) ve yüksekliğini (CSS) 10 piksel azaltılarak belirtiyoruz. Öğeyi her yönde 5 piksel genişleten aynı iç dolgu nedeniyle onu azaltmak zorunda kaldım.

Önceki örnekte sabit bir blok boyutumuz vardı ve arka plan görüntüsünün boyutuna bağlıydık ki bu çok zahmetliydi. Şimdi bloğumuzun genişliğinin yeniden boyutlandırılabilir olduğundan emin olacağız. Bunu yapmak için görüntüden üç parça kesin - yanlar ve merkezin bir parçası. Daha sonra ana bloğun içine, mutlak konumlandırma sayesinde yanlarına yerleştireceğimiz sabit boyutlarda iki eleman yerleştiriyoruz. Arka plan olarak, onlara aynı yan parçaları ve ana bloğu - orta kısmı ayarlayalım. Bu bize değişken genişliğe sahip, köşeleri yuvarlatılmış bir blok verecektir.

Bu teknik sıklıkla bağlantılar veya bölüm/menü başlıkları gibi tek satırlık öğeleri tamamlamak için kullanılır.

HTML ve CSS örneği: kenar çubuklarını kullanarak köşeleri yuvarlama

Örneğin açıklaması

1. class= "block" bloğunun içine iki öğe yerleştiriyoruz - "left_bok" ve "right_bok", bununla yan parçaların görüntülerini arka plan olarak ayarlıyoruz (CSS) ve çoğaltılmalarını yasaklıyoruz (tekrarlama yok). Arka planı orta kısımdan ana bloğun kendisine ayarladık ve sadece yatay olarak kopyalanmasına izin verdik (tekrar-x).
2. Arka plan boyutuna karşılık gelen yan blokların genişliğini belirliyoruz, bizim durumumuzda 14x32 pikseldir. Ancak önceki örnekte olduğu gibi ana blok için dikey dolguyu telafi etmek amacıyla yüksekliği 22 piksele ayarladık.
3. Kenar çubuklarımızı "blok"a göre konumlandıracağız, bu nedenle bunun için :relative, kenar çubuklarının kendisi için de mutlak olarak belirtiyoruz. Daha sonra CSS özelliklerini ve kullanarak bunları ebeveynin karşılık gelen taraflarına bastırıyoruz.
4. Bloğun içeriğinin yan görüntülerin altına gizlenmemesi için, kenar çubuklarına eşit veya biraz daha büyük olabilen "blok" kenar dolgusunu (CSS) ayarladık. Ayrıca metnin kenarlara "yapışmaması" için üstte ve altta küçük girintiler ayarladık.

IE6'da bu yöntemle ilgili küçük bir hata var:

"Bloğun" genişliği veya yüksekliği tek ise, bloğun iç kenarı ile sağdaki kenar çubuğu arasında 1 piksellik hoş olmayan bir girinti olacaktır ve bu, tüm resmi bozacaktır. Bu hata kullanılarak düzeltilebilir CSS hackleme belli bir ifadeyle, ancak burada böyle bir örnek bile vermeyeceğim, çünkü bu genellikle tarayıcıyı "dondurur" ve kullanmamak daha iyidir.

Farklı bir şekilde yapalım. Ana bloğun sağ sınırının ötesine geçmesi için "right_bok" sol kenar boşluğunu (CSS) %100'e ayarlayalım ve ardından genişliğine eşit sayıda piksel sola kaydırarak geri döndürelim. Bu özelliklerin değerleriyle IE6 doğru şekilde çalıştığından bloğu ihtiyacımız olan yere koymaktan başka seçeneği yoktur.

Bu köşeleri yuvarlama yöntemi öncekine benzer, ancak bundan farklı olarak burada HTML öğeleri yanlara yerleştirilmez, ancak ana bloğa eklenir. sözde elemanlar. Bu yaklaşım sayesinde sayfanın fazladan HTML kodundan kurtulmayı başardık.

HTML ve CSS Örneği: Yan Sözde Elemanlar Kullanarak Köşeleri Yuvarlama

Örneğin açıklaması

1. CSS sözde elemanlarını kullanarak ana bloğun başına ve sonuna bir şeyler eklemek istediğimizi belirtin. Ve CSS özelliğini kullanarak, sadece yuvarlatılmış köşelerin veya daha doğrusu kenarların gerekli görüntülerini ekliyoruz. Böylece görüntülerle iki sözde öğe oluşturduk.
2. O zaman her şeyi önceki örnekte olduğu gibi yapıyoruz, yalnızca oluşturulan sözde öğelerle çalışıyoruz.

IE6 ve IE7 için bu örnekte koltuk değneği kullanılmıştır:

1. Bildiğiniz gibi IE6 ve IE7 burada kullanılan sözde elemanları anlamıyor, bu yüzden aşağıdakileri yapıyoruz. Ana öğenin içindeki iki etiketi birleştiren ifadeyi uyguluyoruz ve onlar için zaten önceki örnekte olduğu gibi aynı stilleri ayarladık. İlk innerHTML'den sonraki yerleştirme kodunun, açılış "block" etiketinin hemen sonrasına ve ikinci innerHTML'den sonra kapanış etiketinin öncesine eklendiğini unutmayın. Evet, bizim durumumuzda mutlak konumlandırma kullanıldığı için önemli değil, ancak bazen bunu bilmek faydalı olabilir.
2. Diğer tarayıcıların bu kodu görmesini önlemek için onu ekte sunuyoruz. koşullu yorumlar. Genellikle aynı yorumlarla kapatılmış bir etiketle bağlanan ayrı bir CSS dosyasına alınırsa daha iyi olacaktır.

Kutu sarma ile CSS'de yuvarlatılmış köşeler

Bu yöntemin özü, önce görüntünün köşelerinin kesilmesidir. Daha sonra ana bloğun içine iç içe geçmiş birkaç blok daha (köşe sayısına göre) yerleştirilir. Her birine arka plan olarak bir köşe resmi verilir. Görsellerin blokların köşelerinde yer alacak şekilde çoğaltılması ve koordinatlarının ayarlanması yasaktır. Böylece yuvarlatılmış köşelerin etkisi elde edilir.

HTML ve CSS Örneği: Kutu Sarma Kullanarak Köşeleri Yuvarlama

Örneğin açıklaması

1. Ana bloğun içine dört tane daha yerleştiriyoruz. Bu blokların hiçbirinde kenar boşlukları veya çerçeveler ayarlanmadığından ve yalnızca en içteki blokta girintiler olduğundan, hepsinin yüksekliği ve genişliği eşittir.
2. CSS özelliğini kullanarak iç blokların her birine arka plan olarak bir köşe ayarlayıp çoğaltılmasını yasaklıyor ve blokların köşelerine konumlandırıyoruz. Öğelerin arka plan rengi şeffaf olduğundan, arka planın dört köşesi de sayfada görünür.
3. Kendimizi ekliyoruz dış üniteİstenilen arka plan renginin köşesi ile. Her şey hazır.

İstenilen özelliği class= "block" içinde belirterek bloğun genişliğini açıkça ayarlayabilirsiniz, ancak yüksekliği değiştirmek için en içteki öğeyi kullanmanız gerekir ("rb" kullanıyoruz).

Konumlandırmayla CSS'de yuvarlatılmış köşeler

Burada da arka plan için küçük bloklarla gösterilecek köşeler kesilmiştir. CSS mutlak konumlandırma kullanılarak bu kutular, istenilen arka plan renginin verildiği ana elemanın köşelerine yerleştirilir.

HTML ve CSS Örneği: Konumlandırmayı Kullanarak Köşeleri Yuvarlama

Örneğin açıklaması

1. Ana öğenin (class= "block") içine, köşe blokları görevi görecek "corn_lt", "corn_rt", "corn_lb", "corn_rb" sınıflarını içeren dört etiket yerleştiririz.
2. CSS özelliğini kullanarak her köşe bloğuna kendi arka plan görselimizi bağlıyoruz ve genişlik ve yüksekliğini bu arka plan görsellerinin boyutuna eşit olarak ayarlıyoruz. Her ihtimale karşı, yazı tipi boyutunu ( CSS ) sıfırlayın ve fazlalığı ( CSS ) kesin.
3. Ana eleman için göreceli konumlandırmayı belirtiyoruz (CSS : göreceli), çünkü köşe bloklarını ona göre ve köşelerin kendisi için - mutlak (mutlak) konumlandıracağız.
4. CSS özelliklerini ve kullanarak, köşe bloklarının ana bloğun köşelerinde yer alacak şekilde dikey ve yatay ofset mesafelerini belirleriz.

IE6'da bu yöntemle ilgili birkaç sorun var:

1. "Blok" açıkça bir genişlik belirtmiyorsa, soldaki köşeler yerine oturmayacaktır. Bunun nedeni blokta girintilerin bulunmasıdır. Sorunu çözmenin en kolay yolu, girintileri kaldırmak ve "blok"un ana içeriğini (köşeler olmadan) ek bir sarmalayıcı blok içine almak ve sarmalayıcıda gerekli girintileri belirtmektir. Ancak burada bunu farklı yaptım, IE6'ya öğeyi doğal boyutta görüntülemesini söyleyen zoom :1 özelliğiyle düzeni açtım. Bu özellik geçersiz, bu nedenle kullanmaya karar verirseniz, üzerinden bağlanmanızı öneririm. koşullu yorumlar.
2. Yukarıda tartışılan aynı tek piksellik hata. Ancak burada boşluklar yalnızca bloğun sağ köşeleri ile sağ tarafı arasında değil, altında da oluşabilir. Ve sağdaki boşluklardan kurtulursak, alttakilerde bu işe yaramayacaktır. Çıkış yolu, ana elemanın açıkça eşit genişlik ve yüksekliğini belirlemektir. Tek değerleri de ayarlayabilirsiniz, ancak bu durumda aşağı ve sağa uzaklıkların mesafelerini sıfıra değil -1 piksele eşit olarak ayarlamanız gerekecektir.

Aslında, CSS'de köşeleri bu şekilde yuvarlamanın teknolojisi öncekiyle aynıdır, bu nedenle ayrıntılı yorumlar burada atlanacaktır. Tek fark, burada ayrı arka plan köşe görselleri yerine ortak bir hareketli grafik görselinin kullanılmasıdır. Bu sayede sitenin yüklenmesi hızlandırılır, çünkü bir görsel dörtten daha hafiftir ve barındırma Dört yerine bir çağrı var.

Sprite - site öğeleri için arka plan olarak kullanılan birkaç resmi aynı anda birleştiren bir resim. Karakterin hangi bölümünün belirli bir HTML öğesinin arka planı olacağı, özel CSS özelliğinde belirtilen koordinatlara bağlıdır.

HTML ve CSS Örneği: Konumlandırma ve Karakterleri Kullanarak Köşeleri Yuvarlama

Örneğin açıklaması

1. CSS özelliğini kullanarak köşe bloklarına 22x22 piksel (her çeyrek köşe için 11x11 piksel) boyutlarında yuvarlak bir şekle sahip bir arka plan sprite görüntüsü bağlarız.
2. CSS özelliğini kullanarak arka planın ofset koordinatlarını belirtin. Örneğin, -11px 0 değeri, arka planın x ekseninde 11 piksel sola kaydırılacağı, ancak y ekseninde kaydırılmayacağı anlamına gelir. Böylece hareketli grafiğin sol yarısı öğenin sınırının ötesine geçer ve yalnızca sağ yarısı kalır. Ancak yüksekliği 22 piksel olduğundan ve köşe bloğunun yüksekliği yalnızca 11 piksel olduğundan yalnızca yarısı görülebilir. İşte o zaman ortaya çıkıyor verilen değeröğenin arka planı hareketli grafiğin sağ üst çeyreği olacaktır.

IE6'da önceki örnekte olduğu gibi aynı sorunlar vardır.

Bu örnekte, kenarlığı olan bir öğenin köşelerini yuvarlayacağız, ancak bu, bu özel yöntemin bir özelliği değildir; önceki örneklerde kenarlıkla yuvarlamayı da kullanabilirsiniz.

Ana blokta oluşturulan sözde elemanları kullanarak, ancak onlara konumlandırma uygulamadan yuvarlamaları kendimiz yapacağız.

Ve bir an. Önceki örneklerde köşeler, arka plan içeride olacak şekilde kesilmişti; bu, özellikle köşeleri yuvarlatılmış bloğun arka planının düzensiz olması bekleniyorsa her zaman gerekli değildir. Bu nedenle çerçevenin içindeki arka plan burada şeffaf hale getirildi (bu, PNG formatı) ve köşeler kesildiğinde iç kısımlarının da şeffaf olduğu ortaya çıktı. Gerekirse önceki örneklerde de benzer bir yaklaşım kullanabilirsiniz.

HTML ve CSS Örneği: Sözde Elemanlar Kullanarak Köşeleri Yuvarlama

arka plan ve onun yardımıyla onları sağ tarafa konumlandırıyoruz ve "çoğaltmayı" yasaklıyoruz. Her şey, köşeler hazır.

"Blok" (CSS) için dolgu belirttiğimizden, sözde elemanlar ve buna bağlı olarak köşeler bloğun köşelerinde yer almaz, kenarlardan 15 piksel uzaklaşır. Bunu düzeltmek için, sahte elemanları dolgunun üstüne yerleştirmek üzere sağ taraflara negatif kenar boşlukları (CSS) veriyoruz. Ancak kenar boşluklarını 15 değil 17px yapıyoruz, genişliği 2px (15+2=17) olan çerçeveyi (CSS) kaplamak için bu gerekli. Şimdi hepsi bu.

IE6 ve IE7 için, tarayıcılar burada kullanılan sözde öğeleri anlamadığından, burada tanıdık HTML enjeksiyon desteklerini kullandık:

1. İfadeyi kullanarak, ana öğenin içine bizim de bloklara dönüştürdüğümüz iki etiketi entegre eder. Daha sonra içlerine bir etiket koyuyoruz. Ve bu etiketler sözde öğelerle aynı özelliklere sahiptir. Tek şey, çerçevenin köşelerle örtüştüğü :relative CSS özelliğini ek olarak eklememizdir.

Bu yöntemin dezavantajı, köşeleri yuvarlatılmış bloğun yüksekliğinin açıkça ayarlanamamasıdır, çünkü içerik boyutlarını aşarsa alt köşeler kenarlara yapışmayacaktır. Bu, ana içeriği başka bir bloğa sararak ve ona bir yükseklik vererek önlenebilir.

Sahte elemanlarla ve ek bloklar olmadan köşeleri yuvarlamanın başka bir örneği

Bu örnek öncekine benzer, ancak burada konumlandırma sözde elemanları konumlandırmak için kullanılır. Bu yaklaşım sayesinde bloğun yüksekliğini yuvarlatılmış köşelerle açıkça belirtmek mümkün hale geldi.

HTML ve CSS örneği: blok yüksekliğinin değiştirilebildiği köşeleri yuvarlama

Ve yine IE6 ve IE7 için, ifadeyi kullanarak ana bloğun içine birkaç ek öğe ekliyoruz ve kodu koşullu yorumlarda kapatıyoruz. Ancak bu sefer sahte unsurları taklit etmeye bile çalışmayacağız, ancak bunu daha kolay yapacağız.

1. "block"un içine dört etiket ekleyin ve bunlara konumlandırma uygulayın. Daha sonra görüntünün köşelerini onlar için arka plan olarak belirleyip ana öğenin köşelerine yerleştiriyoruz. Yani tam olarak yukarıda tartışılan yöntemlerden birinde olduğu gibi hareket ediyoruz.
2. Tek piksellik hatadan kurtulmak için (yukarıda birden fazla kez bahsedilmişti), sağ köşe elemanlarına %100 değere sahip bir sol kenar boşluğu (CSS) ve -9 piksele eşit bir negatif uzaklık ekleyin. Genel olarak, hatırlarsanız, bu ofsetin köşe bloğunun genişliğine eşit olması gerekir (bizde 11 piksel var), ancak burada sahip olduğumuz 2 piksellik kenarlığı unutmayın - köşeleri üstüne koymamız gerekiyor ( 11px-2px=9px).

Bu arada, aslında önceki örnekte yaptığımız gibi sözde elemanları taklit etmek daha kolay olurdu - yani ek kod daha az olurdu. Ancak IE6'da değil, bu tarayıcı için birkaç "koltuk değneği" daha gerekir ve sonuç olarak iki ayrı yazmanız gerekir koşullu yorumlar- IE6 ve IE7 için, bu yalnızca kodu şişirirdi ...

Firefox'ta bu yöntem 3.6 sürümünden itibaren doğru çalışıyor ve Opera'da - 10.0 sürümünden itibaren onlar için koltuk değneği icat etmedim çünkü bunun pek önemi yok.

Selamlar Arkadaşlar. Bu makale şunlara ayrılmıştır: popüler konu acemi web yöneticileri arasında - css köşeleri yuvarlatılmış. Cevaplamaya çalışacağım sorular nasıl yapılacağı olacak yuvarlatılmış köşeler herhangi bir görsel kullanımına başvurmadan yalnızca CSS kullanan site öğeleri.

İÇİNDE Bu method hem artıları hem de eksileri var. Avantajı elbette herhangi bir araç kullanarak görsel oluşturmaya gerek olmamasıdır. grafik editörü, bunları sunucuya yükleyin ve ardından bunları oluşturmak için gerekli yerlere düzenlemek için CSS'yi kullanın. istenilen etki. Bu durumda, HTML kodunda ek öğeler oluşturmak ve bunların her biri için ayrı özellikler belirlemek gerekir.

Eksilere gelince, burada bir soruna dikkat çekilebilir - bu özellik tüm web tarayıcıları tarafından desteklenmez, özellikle eski sürümlerçeşitli tarayıcılar.

Ancak CSS ile köşeleri yuvarlamak giderek daha popüler hale geliyor. Zaten anlayabileceğiniz gibi bu yazıda CSS 3'te bulunan özelliği kullanacağız.

CSS ile yuvarlatılmış köşeler.

Yani örneğin şunları alacağız blok elemanı DIV'yi açın ve köşelerini yuvarlatın. Örneğin, bir blok oluşturalım ve doğrudan HTML kodunda stil özelliğini kullanarak ona özellikler atayalım. Öncelikle herhangi bir renkteki arka planla doldurulmuş bir blok öğemiz var:

Bu arada, sitenizde veya başka herhangi bir yerde hangi renk kodunun bulunduğunu öğrenmeniz gerekiyorsa, bu işinize yarayacaktır.

Ve bunu bir web tarayıcısında şu şekilde göreceğiz:

Şimdi köşeleri yuvarlamak için kenar yarıçapı olarak çevrilebilecek "border-radius" özelliğini kullanalım. Evet, tam olarak ve pek çok kişi bunun çerçevenin yarıçapı veya her ne denirse (sınır) olduğunu düşünemez. Bu özellik, öğenin sınırlarının yarıçapından sorumludur ve orada bulunmayabilecek çerçeveleri veya kenarlıklarından değil. Ancak özellik, öğe üzerinde kenarlık kullanılmadan çalışmaya devam edecektir. Umarım söylemek istediğimi anlamışsındır. Bu özelliğin değeri, CSS'de geçerli olan yüzdeler, pikseller (px), noktalar (pt) vb. gibi herhangi bir sayısal değerdir. Evet ve şunu unutma verilen mülköğenin dört köşesinde aynı anda çalışır; ayrıca her köşe için farklı bir yarıçap belirleyebilirsiniz, ancak bu konuya daha sonra değineceğiz. Öncelikle dikdörtgenimizin köşelerinin yarıçapını ayarlayalım. 5 piksele eşit olsun:

Öğe daha sonra şöyle görünecektir:

Şimdi, her köşe için ayrı ayrı kendi yarıçapınızı nasıl ekleyeceğinizi bulmayı öneriyorum. Bunu yapmak için her köşeye ayrı ayrı uygulanabilecek bir özellik kullanabiliriz. Önceki örnekten bahsedersek, öğenin özellikleri tam olarak şöyle görünecektir:

Kenarlığın sol üst yarıçapı:5px; /* sol üst köşe */ border-top-right-radius:5px; /* sağ üst köşe */ border-bottom-right-radius:5px; /* sağ alt köşe */ border-bottom-left-radius:5px; /* sol alt köşe */

Yani her köşeye kendi değerini vermek istiyorsak böyle bir fırsatımız var ve bundan emin olmak için aşağıdaki kodu alıyoruz:

Ve sonra şu sonucu elde ederiz:

Görüldüğü gibi her köşenin sınırının kendine ait bir yarıçap değeri vardır.
Ek olarak CSS, her köşenin kenarlığının değerini aşağıdaki gibi görünen kısa bir gösterim biçiminde ayarlamamıza olanak tanır:

Değerlerin bu sırayla takip edeceği yer:

Kenarlık yarıçapı: 5px /* sol üst köşe */ 10px /* sağ üst köşe */ 15px /* sağ alt köşe */ 20px /* sol alt köşe */;

Buna göre, yukarıdakilere dayanarak, aynı şekilde yarıçap sınırını yalnızca üç (bir veya iki) köşe için ayarlayabileceğimiz açıkça ortaya çıkıyor:

Bir web tarayıcısında şu şekilde görünür:

Tamamen kafanız karışmadıysa devam edeceğiz. Gerçek şu ki, her köşe sınırının yarıçapı, yukarıda düşündüğümüz gibi tek bir değerde değil, iki değerde belirtilebilir. Yani her açı için iki değer. Bu durumda, ilk değer köşenin yarıçapını yatay olarak, ikinci değer ise dikey olarak ayarlayacaktır. Önce bir köşeden başlayalım:

Bu örnekte yalnızca öğenin sol üst köşesini etkiledik:

Değerleri tersten düzenlerseniz eleman şöyle görünecektir:

Bu konuda bitirmek mümkün olacak gibi görünüyor, ama hayır. Başka bir numara daha var. Bir özellik değerinde değerler arasında eğik çizgi (/) kullanabiliriz. Eğik çizgi, değerleri diğer değerlerle eşleştirmemize yardımcı olabilir. Genel olarak göstermek anlatmaktan daha kolaydır. Basit başlayalım. Diyelim ki yatay yarıçapın 35 piksel, dikey yarıçapın ise 5 olmasını istiyoruz. Aynı zamanda bu değerler tüm köşeler için geçerlidir. O zaman şöyle yazabiliriz:

Ve şu sonucu elde edin:

Şimdi daha karmaşık bir örneğe bakalım:

Bu durumda, eğik çizgiden (/) önceki değer köşenin yatay yarıçapını, eğik çizgiden sonraki değer ise dikey yarıçapı ifade edecektir. Bu durumda değerler birbirleriyle şu şekilde ilişki kuracaktır:

Kenarlığın sol üst yarıçapı: 20 piksel 15 piksel; sağ üst kenarlık yarıçapı: 10 piksel 25 piksel; kenar-alt-sağ-yarıçap: 40 piksel 15 piksel; kenar-alt-sol-yarıçap: 10px 25px;

Ve sonuç şöyle olacak:

Yazının sonunda ise bu özelliğin çeşitli tarayıcılar tarafından desteklenmesinden bahsedelim.

Çeşitli web tarayıcılarında köşeleri yuvarlama.

Burada bu özelliğin tarayıcıların tüm sürümleri tarafından desteklenmediğini belirtmekte fayda var. Özellik IE9+, Firefox 4+, Chrome, Safari 5+ ve Opera'da desteklenir.
Ancak bu özelliği desteklemeyen bazı tarayıcı sürümleri için, özelliğe önek veya önek ekleyen standart olmayan özellikler vardır.
4.0'dan önceki Chrome, 5.0'dan önceki Safari ve iOS, standart olmayan -webkit-border-bottom-left-radius özelliğini kullanıyor.
Sürüm 4.0'dan önceki Firefox, standart olmayan -moz-border-radius-bottomleft özelliğini kullanıyordu.
Bu durumda özelliği bu önekleri kullanarak çoğaltmamız gerekecek. Örneğin, sol üst köşenin kenarlığı için bir özelliği beş piksele eşit bir değere ayarlarsak:

kenarlık-üst-sol-yarıçap: 5px;

Daha sonra önekler kullanılarak çoğaltılan özellik şöyle görünecektir:

webkit-sınır-alt-sol-yarıçap:5px; -moz-sınır-yarıçap-altsol:5px; kenarlık-üst-sol-yarıçap: 5px;

Umarım her şeyi net bir şekilde açıklayabilmişimdir ve artık sadece CSS kullanarak köşeleri nasıl yuvarlatabileceğinizi anlamışsınızdır.
Sana iyi şanslar!

dikkat css stilleri bu rakam dosyaya bir kez girilir ve HTML etiketi siteye sınırsız sayıda yerleştirilebilir.

İhraç sonucunda elde ettiğimiz çerçeveli dikdörtgen.

CSS'de yuvarlatılmış köşeler nasıl yapılır

Bu özellik köşeleri yuvarlamak için kullanılır. sınır yarıçapı.

Yalnızca bu özelliği ekleyebildik. Yuvarlama sonucunu tarayıcıların yeni sürümlerinde normal olarak görüntüler, ancak birçok kullanıcı hala bu özelliğin düzgün çalışmadığı eski sürümlere sahiptir. Bu nedenle, uyumluluk amacıyla bu özelliğe ilişkin doğrudan bağlantılı birkaç açıklama daha ekleyeceğiz. belirli tarayıcılar, Style.css dosyasındaki bloğumuza, aşağıdaki kodla sonuçlanır:

HTML div etiketi bize şunu verecektir: yuvarlak çerçeveli dikdörtgenve köşeler:

ve metnin çıktısını almak için kullanılan HTML etiketi şöyle görünecektir:

pib9.ru

Aldık yuvarlarılmış dikdörtgen ve metin:

Koddan dikdörtgen boyutu açıklama niteliklerini kaldırırsanız Genişlik Ve yükseklik köşeleri yuvarlatılmış aşağıdaki şekilleri elde edebilirsiniz:

1. Metin yok

Bu durumda formlar ortamın boyutlarını alır: Uzunluk alanın genişliğine karşılık gelir ve form içerikle doldukça yükseklik değişir.

Seçilen Köşeleri Yuvarlama

Stillerin açıklamasında, özellikteki 10px parametresi sınır yarıçapıİstenilen seçilerek değiştirilebilen eğrilik yarıçapını gösterir. 0 olarak ayarlanırsa yuvarlama gerçekleşmez. Bu özellik seçilen köşelerin yuvarlatılması gerektiğinde kullanılabilir.

Yuvarlamayı iptal ettiğimiz yerde sıfırları göstererek her köşe için yuvarlama yarıçapının değerlerini yazalım. Örneğin üçüncü ve dördüncü köşelerdeki yuvarlamayı iptal edeceğiz. Kodumuz şu şekilde görünecek:

1. Sol üst köşe.

2. Sağ üst köşe.

3. Sağ alt köşe.

4. Sol alt köşe.

Bunun sonucunda yalnızca üst köşelerinde seçilen yuvarlatmalara sahip bir dikdörtgen elde edilir.

Açılar sol üst köşeden başlayarak saat yönünde sayılır:

2. Stil dosyasına yazmadan HTML koduyla köşeleri yuvarlama

Köşeleri yuvarlatılmış bir dikdörtgen elde etmenin ikinci yolunu düşünün. HTML kullanarak stil sayfasına yazmadan kod.

HTML yuvarlatılmış köşeler

Tüm süreci daha da basitleştiren küçük bir özellik var; HTML yuvarlatılmış köşeler. Aynı stillerin yazıldığı bir HTML kodunun oluşturulmasından oluşur. css kodları. Bu, CSS bloğuyla aynı nitelikleri kullanır ve bloğun Style.css dosyasına yazılması ihtiyacını ortadan kaldırır. Kısaca CSS kodunu tamamen HTML koduyla değiştiriyoruz.

CSS bloğumuz yerine köşeleri yuvarlatılmış dikdörtgenin görüntülenmesi gereken yere yapıştırdığımız bir HTML betiği alıyoruz:

Köşeleri yuvarlatmanın ilk yolu, aynı şeklin stilleri değiştirmeden birden fazla kullanıldığı durumlarda kullanılabilir. İkinci yöntem, stilleri bir kez kullanılan formlar için kullanılır.

3. Köşeleri yuvarlatılmış resimler. HTML görüntüsünün etrafındaki çerçeve

ben de sana vermek istiyorum kullanışlı bilgi. Sık sık kullanarak web sitesi tasarımı için resimler, Şekillerini değiştirerek, onları güzel renkte ve farklı genişlikte bir çerçeveyle çerçeveleyerek onları daha da güzelleştirmek istiyorum. Bu şu soruyu akla getiriyor: " Bir resmin köşeleri nasıl yuvarlanır??”.

Bu çok basit bir şekilde yapılır ve şimdi nasıl yapılacağını öğreneceğiz.

Resmi siteye yerleştirelim ve arka plan div etiketi olarak kendisinin arka planı haline getirelim. Aşağıdaki kodu ve resmi elde ediyoruz:

Resmin köşelerini kenarlıkla yuvarlama

CSS ve HTML'de görsellerin köşelerinin yuvarlatılması ve kenarlık eklenmesi yukarıda açıklanan iki yoldan biriyle yapılabilir.

Bu makalenin ilk yöntemini kullanırsak, stil dosyası ve HTML div etiketinin görüntü kodları şöyle görünecektir:

Niteliklerden bazılarının stil dosyasına, bazılarının ise div etiketine eklenebileceğini lütfen unutmayın. Bizim durumumuzda görselin genişlik ve yükseklik boyutları HTML koduna eklenmiştir.

Bu makalede açıklanan stil dosyasını kullanmadan ikinci yöntemin HTML kodu şuna benzer:

Her iki yöntemin kodlarının işlenmesi sonucunda aynı sonucu elde ederiz - köşeleri yuvarlatılmış bir resim: