CSS kullanarak yuvarlak köşeler oluşturma [kapalı]

CSS kullanarak nasıl köşeler yuvarlayabilirim?

CSS3 tanıtıldığından, CSS kullanarak yuvarlak köşeler eklemenin en iyi yolu border-radiusözelliği kullanmaktır . Sen edebilirsiniz spec okumak mülkiyet veya bazı olsun MDN'yi üzerinde yararlı uygulama bilgileri :

Uygulama yapmayan bir tarayıcı kullanıyorsanız (Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5), o zaman aşağıdaki bağlantılar çok sayıda farklı yaklaşımı detaylandırır. Sitenize ve kodlama stilinize uygun olanı bulun ve onunla devam edin. border-radius

1. CSS Tasarımı: Özel Köşeler ve Kenarlıklar Oluşturma
2. CSS Yuvarlatılmış Köşeler 'Yuvarlama'
3. CSS ile 25 Yuvarlak Köşe Tekniği

Yığın Taşması'nın oluşturulmasında bu konuya erken baktım ve bir kanalizasyondan geçiyormuşum gibi hissetmemi sağlayan yuvarlak köşeler oluşturmanın herhangi bir yöntemini bulamadım .

CSS3 sonunda tanımlıyor

border-radius:

Tam olarak nasıl çalışmasını istediğiniz budur. Bu Safari ve Firefox'un en son sürümlerinde iyi çalışmasına rağmen, IE7'de (ve IE8'de düşünmüyorum) veya Opera'da hiç çalışmıyor.

Bu arada, o tamamen aşağı kesmek. Şu anda IE7, FF2 / 3, Safari3 ve Opera 9.5'te bunu yapmanın en temiz yolu olduğunu düşündüğüm şeyleri duymakla ilgileniyorum.

Genellikle css ile yuvarlatılmış köşeler alıyorum, tarayıcı desteklemiyorsa içeriği düz köşelerle görürler. Yuvarlatılmış köşeler siteniz için çok kritik değilse aşağıdaki satırları kullanabilirsiniz.

Tüm köşeleri aynı yarıçapla kullanmak istiyorsanız, bu kolay yoldur:

.my_rounded_corners{
   -webkit-border-radius: 5px;
           border-radius: 5px;
}

ancak her köşeyi kontrol etmek istiyorsanız bu iyi:

.my_rounded_corners{
    border: 1px solid #ccc;

    /* each value for each corner clockwise starting from top left */
    -webkit-border-radius: 10px 3px 0 20px;
            border-radius: 10px 3px 0 20px;
}

Her sette gördüğünüz gibi tarayıcıya özgü stiller var ve dördüncü sıralarda bununla standart şekilde beyan ederiz, gelecekte diğerlerinin (umarım IE de) tarzımızın da onlar için hazır olması için bu özelliği uygulamaya karar verdiğini varsayarız.

Diğer cevaplarda belirtildiği gibi, bu Firefox, Safari, Camino, Chrome'da güzel çalışıyor.

IE'de köşeler oluşturmakla ilgileniyorsanız, bu yararlı olabilir - http://css3pie.com/

Arka plan resimlerini kullanmanızı tavsiye ederim. Diğer yollar neredeyse iyi değil: Kenar yumuşatma ve anlamsız işaretleme yok. Burası JavaScript'in kullanıldığı yer değil.

Brajeshwar'ın dediği gibi: css3 border-radiusseçiciyi kullanma . Artık, uygulayabilir -moz-border-radiusve -webkit-border-radiusMozilla ve Webkit için sırasıyla tarayıcılar tabanlı.

Peki, Internet Explorer ile ne olacak? Microsoft, Internet Explorer'ın bazı ekstra özelliklere sahip olmasını ve daha fazla beceri kazanmasını sağlamak için birçok davranışa sahiptir.

İşte: Bir .htcdavranış dosya almak için round-cornersgelen border-radiusCSS'nizde değeri. Örneğin.

div.box {
    background-color: yellow; 
    border: 1px solid red; 
    border-radius: 5px; 
    behavior: url(corners.htc);
}

Tabii ki, davranış seçici geçerli bir seçici değil, ancak koşullu yorumlarla (sadece IE için) farklı bir css dosyasına koyabilirsiniz.

Davranış HTC dosyası

Firefox, Safari ve Chrome'un yeni sürümlerinde CSS3 desteği uygulandığında, "Sınır Yarıçapı" na bakmak da yardımcı olacaktır.

-moz-border-radius: 10px;  
-webkit-border-radius: 10px;  
border-radius: 10px;

Diğer herhangi bir CSS stenolojisi gibi, yukarıdakiler de genişletilmiş formatta yazılabilir ve böylece üst sol, üst sağ, vb.Için farklı Sınır Yarıçapı elde edebilir.

-moz-border-radius-topleft: 10px;  
-moz-border-radius-topright: 7px;  
-moz-border-radius-bottomleft: 5px;  
-moz-border-radius-bottomright: 3px;  
-webkit-border-top-right-radius: 10px;  
-webkit-border-top-left-radius: 7px;  
-webkit-border-bottom-left-radius: 5px;  
-webkit-border-bottom-right-radius: 3px;

jQuery bunu kişisel olarak ele almamın yoludur. css desteği minimal, görüntüler çok titiz, jQuery yuvarlak köşeleri olmasını istediğiniz öğeleri seçmek için bazı şüphesiz tartışmayacak olsa bile benim için mükemmel bir anlam ifade ediyor. Yakın zamanda işte bir proje için kullandığım bir eklenti var: http://web.archive.org/web/20111120191231/http://plugins.jquery.com:80/project/jquery-roundcorners-canvas

Her zaman JavaScript yolu vardır (diğer cevaplara bakın) ama tamamen stil olduğu için, bunu başarmak için istemci komut dosyalarını kullanmaya karşıyım.

Tercih ettiğim yol (sınırları olmasına rağmen), CSS kullanarak kutunuzun 4 köşesine yerleştireceğiniz 4 yuvarlak köşe görüntüsü kullanmaktır:

<div class="Rounded">
  <!-- content -->
  <div class="RoundedCorner RoundedCorner-TopLeft"></div>
  <div class="RoundedCorner RoundedCorner-TopRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomLeft"></div>
</div>

/********************************
* Rounded styling
********************************/

.Rounded {
  position: relative;
}

.Rounded .RoundedCorner {
  position: absolute;
  background-image: url('SpriteSheet.png');
  background-repeat: no-repeat;
  overflow: hidden;

  /* Size of the rounded corner images */
  height: 5px;
  width: 5px;
}

.Rounded .RoundedCorner-TopLeft {
  top: 0;
  left: 0;

  /* No background position change (or maybe depending on your sprite sheet) */
}

.Rounded .RoundedCorner-TopRight {
  top: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px 0;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-TopRight {
  right: -1px;
}

.Rounded .RoundedCorner-BottomLeft {
  bottom: 0;
  left: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: 0 -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomLeft {
  bottom: -20px;
}

.Rounded .RoundedCorner-BottomRight {
  bottom: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomRight {
  bottom: -20px;
  right: -1px;
}

Belirtildiği gibi, sınırları vardır (yuvarlak kutunun arkasındaki arka plan düz olmalıdır, aksi takdirde köşeler arka planla eşleşmez), ancak başka bir şey için çok iyi çalışır.

Güncellendi: Hareketli grafik sayfası kullanarak uygulama geliştirildi.

Şahsen ben bu çözümü en iyi, IE eğri sınırları oluşturmak için izin vermek için bir .htc gibi.

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

Safari, Chrome, Firefox> 2, IE> 8 ve Konquerer'de (ve muhtemelen diğerlerinde) CSS'de border-radius özelliği . Henüz spesifikasyonun bir parçası olmadığından, lütfen satıcıya özel bir önek kullanın ...

Misal

#round-my-corners-please {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

JavaScript çözümleri genellikle küçük bir yığın ekler div yuvarlatılmış görünmesi için veya 1 piksel çentikli köşeler yapmak için kenarlıklar ve negatif kenar boşlukları kullanırlar. Bazıları IE'de SVG'yi de kullanabilir.

IMO, CSS yolu daha kolay, çünkü kolay ve onu desteklemeyen tarayıcılarda incelikle bozulacak. Bu, elbette, yalnızca müşterinin IE <9 gibi desteklenmeyen tarayıcılarda zorlamadığı bir durumdur.

İşte son zamanlarda yaptığım bir HTML / js / css çözümü. IE'de mutlak konumlandırma ile 1 piksellik bir yuvarlama hatası var, bu yüzden kabın piksel sayısının eşit sayıda olmasını istiyorsunuz, ancak oldukça temiz.

HTML:

<div class="s">Content</div>

jQuery:

$("div.s")
.wrapInner("<div class='s-iwrap'><div class='s-iwrap2'>")
.prepend('<div class="tr"/><div class="tl"/><div class="br"/><div class="bl"/>');

CSS:

/*rounded corner orange box - no title*/
.s {
    position: relative;
    margin: 0 auto 15px;
    zoom: 1;
}

.s-iwrap {
    border: 1px solid #FF9933;
}

.s-iwrap2 {
    margin: 12px;
}

.s .br,.s .bl, .s .tl, .s .tr {
    background: url(css/images/orange_corners_sprite.png) no-repeat;
    line-height: 1px;
    font-size: 1px;
    width: 9px;
    height: 9px;
    position: absolute;
}

.s .br {
    bottom: 0;
    right: 0;
    background-position: bottom right;
}

.s .bl {
    bottom: 0;
    left: 0;
    background-position: bottom left;
}

.s .tl {
    top: 0;
    left: 0;
    background-position: top left;
}

.s .tr {
    top: 0;
    right: 0;
    background-position: top right;
}

Görüntü sadece 18 piksel genişliğindedir ve 4 köşesinin hepsi birlikte paketlenmiştir. Çember gibi görünüyor.

Not: İkinci iç sargıya ihtiyacınız yoktur, ancak paragraflar ve başlıklardaki kenar boşluklarının hala kenar boşluğu çökmesini sürdürmesi için iç sargı üzerinde kenar boşluğu kullanmayı seviyorum. Ayrıca jquery atlayabilir ve sadece iç sarıcı html içine koyabilirsiniz.

Yuvarlatılmış köşelerin çalışmasının ne kadar karmaşık olduğunun bir göstergesi olarak Yahoo bile onları cesaret kırıyor (ilk madde işaretli noktaya bakın)! Bu makalede sadece 1 piksel yuvarlatılmış köşeden bahsediyorlar, ancak uzmanlıklarına sahip bir şirket bile, çoğu zaman onları çalıştırmak için çok fazla acı verdikleri sonucuna vardı .

Tasarımınız onlarsız hayatta kalabilirse, bu en kolay çözümdür.

Elbette, eğer sabit bir genişlikse, CSS kullanarak süper kolaydır ve rahatsız edici veya zahmetli değildir. Her iki yönde de ölçeklenmeye ihtiyaç duyduğunuzda, işler dalgalı olur. Bazı çözümlerde, bunun gerçekleşmesi için üst üste yığılmış şaşırtıcı miktarda div vardır.

Benim çözümüm, tasarımcıya yuvarlatılmış köşeleri kullanmak istiyorlarsa (şimdilik) sabit bir genişlik olması gerektiğini dikte etmektir. Tasarımcılar yuvarlatılmış köşeleri severler (ben de), bu yüzden bunu makul bir uzlaşma olarak görüyorum.

Ruzee Sınırları , tüm büyük tarayıcılarda (Firefox 2/3, Chrome, Safari 3, IE6 / ve tek Javascript tabanlı kenar yumuşatma yuvarlak köşe çözümüdür ve hem yuvarlak eleman VE hem de ana eleman bir arka plan görüntüsü içerir. Ayrıca sınırlar, gölgeler ve ışıltı yapar.

Yeni RUZEE.ShadedBorder başka bir seçenektir, ancak CSS'den stil bilgisi edinme desteği yoktur.

Sınır yarıçapı çözümü ile gidecek olursanız, safari / chrome / FF için çalışmasını sağlayacak css oluşturmak için bu harika web sitesi var.

Her neyse, tasarımınızın yuvarlak köşeye bağlı olmaması gerektiğini düşünüyorum ve Twitter'a bakarsanız, IE ve opera kullanıcılarına sadece F **** diyorlar. Yuvarlak köşeler olması güzel ve ben şahsen IE kullanmayan havalı kullanıcılar için bunu saklıyorum :).

Tabii ki bu müşterilerin görüşü değildir. İşte bağlantı: http://border-radius.com/

Yukarıda bahsedilen htc çözümlerinin eklenmesine ek olarak, IE'de yuvarlatılmış köşelere ulaşmak için başka çözümler ve örnekler .

"En iyi" yol yoktur; sizin için çalışan yollar ve olmayan yollar vardır. Bunu söyledikten sonra, burada CSS + Görüntü tabanlı, akışkan yuvarlak köşe tekniği oluşturma hakkında bir makale yayınladım:

Ve Görüntüler Kullanarak Yuvarlak Köşeli Kutu - Bölüm 2

Bu hile genel bir bakış, iç içe DIV'ler ve arka plan görüntüsü tekrarlama ve konumlandırma kullanır. Sabit genişlikli düzenler için (sabit genişlikte gerilebilir yükseklik), üç DIV ve üç görüntüye ihtiyacınız olacaktır. Sıvı genişliği düzeni (gerilebilir genişlik ve yükseklik) için dokuz DIV ve dokuz görüntüye ihtiyacınız olacaktır. Bazıları bunun çok karmaşık olduğunu düşünebilir, ancak IMHO şimdiye kadarki en güzel çözüm. Saldırı yok, JavaScript yok.

Bir süre önce bu konuda bir blog makalesi yazdım, bu yüzden daha fazla bilgi için buraya bakın

<div class="item_with_border">
    <div class="border_top_left"></div>
    <div class="border_top_right"></div>
    <div class="border_bottom_left"></div>
    <div class="border_bottom_right"></div>
    This is the text that is displayed
</div>

<style>
    div.item_with_border
    {
        border: 1px solid #FFF;
        postion: relative;
    }
    div.item_with_border > div.border_top_left
    {
        background-image: url(topleft.png);
        position: absolute;
        top: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_top_right
    {
        background-image: url(topright.png);
        position: absolute;
        top: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_left
    {
        background-image: url(bottomleft.png);
        position: absolute;
        bottom: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_right
    {
        background-image: url(bottomright.png);
        position: absolute;
        bottom: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }   
</style>

Oldukça iyi çalışıyor. Javascript gerekmez, sadece CSS ve HTML. En az HTML ile diğer şeylere müdahale. Mono'nun yayınladığı şeye çok benziyor, ancak IE 6'ya özgü herhangi bir saldırı içermiyor ve kontrol ettikten sonra hiç çalışmıyor gibi görünüyor. Ayrıca, başka bir hile, her köşe görüntüsünün iç kısmını saydam yapmaktır, böylece köşeye yakın olan metni engellemez. Dış kısım, yuvarlatılmamış div kenarlığını kaplayabilmesi için şeffaf olmamalıdır.

Ayrıca, CSS3 sınır yarıçapı ile geniş çapta desteklendiğinde, bu yuvarlak köşeler yapmanın resmi en iyi yolu olacaktır.

CSS kullanmayın, jQuery'den birkaç kez bahsedildi. Öğelerinizin arka planını ve kenarlığını tam olarak kontrol etmeniz gerekiyorsa, jQuery Background Canvas Plugin'i deneyin. Bir HTML5 Canvas öğesini arka plana yerleştirir ve istediğiniz her arka planı veya kenarlığı çizmenize izin verir. Köşeleri yuvarlatılmış, degradeler vb.

Opera henüz sınır yarıçapını desteklemiyor (görünüşe göre sürüm 10'dan sonraki sürümde olacak). Bu arada, benzer bir efekt oluşturmak üzere bir SVG arka planı ayarlamak için CSS'yi kullanabilirsiniz .