Benim web sayfalarında alanları tanımlamak için div etiketlerini kullanın. Ben arka plan, boyut, dolgu vb. Gibi tüm belirgin şeyleri ayarlıyorum. Ama hepsi çok kare.nasıl div etiketi bölgenin köşelerini yuvarlamak için tek CSS kullanılır?
Köşeleri yuvarlamak için yalnızca CSS 'u nasıl kullanabilirim?
Sen border-radius özelliğini kullanmak. Bununla birlikte, bu, yalnızca hiçbir tarayıcının henüz uygulanmadığı CSS3'te desteklenir. Eğer sadece bir kaç tarayıcılarda çalışmak gerekiyorsa -webkit-border-radius ve sırasıyla Safari ve Firefox'ta çalışmasına izin ediyorum -moz-border-radius kullanabilirsiniz. Görsel kullanmaya karşı değilseniz
. İşte ben making rounded borders için geldim yöntemi. Tüm Firefox sürümlerinde yuvarlatılmış köşeleri
-moz-border-radius alır. Sitepoint CSS Reference adresinde daha fazla bilgi.
border-radius Safari'de yuvarlatılmış köşeler elde edeceksiniz 3. CSS 3 Spec adresindeki border-radius hakkında daha fazla bilgi.
"Sadece CSS" ile "JavaScriptsiz" demek istiyorsanız, o zaman öğelerinize yuvarlak köşeli arka plan görüntüleri ekleyebilirsiniz. Bu durumda ne kadar esnekliğe ihtiyacınız olduğuna bağlı olarak fazladan işaretlemeye ihtiyacınız olabilir.
Tek bir görüntüyü kullanarak düşünüyorum, henüz multiple background images kullanamazsınız düşünülürse iyi sadece CSS seçenektir.
Eğer kullanamazsanız, o zaman kontrol etmek isteyebilirsiniz Nifty Corners Cube. Bunlardan bahsediyorum çünkü görüntülerin üstünde bile çalışıyor ve şeffaflığı destekliyor.
İşte, yalnızca CSS aracılığıyla nasıl elde edileceğini göstermek için basit bir HTML belgesi. Orijinal için
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style>
.b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;}
.b1f {height:1px; background:#ddd; margin:0 5px;}
.b2f {height:1px; background:#ddd; margin:0 3px;}
.b3f {height:1px; background:#ddd; margin:0 2px;}
.b4f {height:2px; background:#ddd; margin:0 1px;}
.contentf {background: #ddd;}
.contentf div {margin-left: 5px;}
</style>
</head>
<body>
<b class="b1f"></b><b class="b2f"></b><b class="b3f"></b><b class="b4f"></b>
<div class="contentf">
Content Area Content Area Content Area Content Area Content Area Content Area
Content Area Content Area Content Area Content Area Content Area Content Area
Content Area Content Area Content Area Content Area Content Area Content Area
</div>
<b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>
</body>
</html>
Bağlantı: http://blog.yosle.com/2007/09/20/css-round-corners/
hakkında google sor "css Köşeleri hiçbir görüntü yuvarlak" ve bunu yapmak için nasıl çok, çok örneklerini bulacaksınız.
Şahsen, sayfa kaynağında ürettikleri gürültü miktarına rağmen, çizginin çizgisel çizgilerini çizmek için kenar boşluklarını manipüle etmeye dayalı yöntemleri kullanmayı seviyorum, çünkü bunlar en esnek ve herhangi bir kenar şekli çizebilir . Eğer (yani 90 derece dairesel yay kullanarak) gerçek yuvarlak köşeler sadece ilgileniyorsanız, özenle konuma kurşunla nasm'ın dayalı çok daha kompakt bir çözüm var.
Trickery bullet point için link: http://www.cssplay.co.uk/boxes/curves .html –
http://www.sitepoint.com/blogs/2005/08/19/dom-foolery-with-images/'da, görüntülerde yuvarlak kenarlıkların nasıl ayarlanacağını açıklayan bir eğitici var. Peharps, görüntü bir divın arka planı olarak ayarlandığından, sizin için yararlı olur. Diğer görüntüleri ve javascript kullanmanız gerekse de. JQuery kullanırsanız javascript kodu düşebilir. o/
Biz ... tarayıcılarda bu özelliği özledim; ( – vaske
Bu cevap doğru olsa ben işe yarayacak bir cevap aşağıda Cevabımı bakın web geliştiricileri/tasarımcıları bugün –
için pratik nasıl görmüyorum. günümüzde tarayıcılar arasında –