Çocuğu CSS'de ebeveynin kavisli sınırlarına uymaya zorlama

135

Başka bir divin içinde bir div var. #outerve #inner. #outerkıvrımlı kenarlıklar ve beyaz bir arka plan var. #innerkavisli kenarlıkları ve yeşil bir arka planı yoktur. #innerkavisli sınırlarının ötesine uzanır #outer. Bunu durdurmanın bir yolu var mı?

#outer { 
        display: block; float: right; margin: 0; width: 200px;
        background-color: white; overflow: hidden;
        -moz-border-radius: 10px; 
        -khtml-border-radius: 10px; 
        -webkit-border-radius: 10px; 
        border-radius: 10px; 
    }
    #inner { background-color: #209400; height: 10px; border-top: none; }

 <div id="outer">
        <div id="inner"></div>
        <!-- other stuff needs a white background -->
        <!-- bottom corners needs a white background -->
    </div>

Snippet'i genişlet

Nasıl denersem deneyim hala örtüşüyor. Sınırlarına nasıl #inneritaat edip doldurabilirim #outer?

Düzenle

Aşağıdaki hack şimdilik bu amaca hizmet etti. Ama soru duruyor (belki CSS3 ve webbrowser yazarları için): Alt öğeler neden ebeveynlerinin kavisli sınırlarına uymuyor ve onları zorlamak için yine de var mı?

Şimdilik benim ihtiyaçlarım için bu sorunu çözmek için, bireysel sınırlara eğriler atayabilirsiniz. Bu yüzden amacım için, iç elemanın ilk ikisine bir eğri verdim.

#inner {
    border-top-right-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px;
    border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px;
}

css

— Daniel Bingham
kaynak

Dahili elemanla tam olarak aynı kenarlık yarıçapını ayarlamaya çalıştınız mı?

— Daniel O'Hara

1

Ama iç elemanın sınır yarıçapının dümdüz olmasını istiyorum. Sadece belirli bir köşe için bir sınır yarıçapı ayarlamak mümkün müdür?

— Daniel Bingham

Kesinlikle. Bunları bile atayabilirsiniz border-radius: TL TR BL BR.

— Daniel O'Hara

29

Bunu "Çocuğu ebeveyninin emirlerine uymaya zorlamak" olarak okudum. :)

— Bennor McCarthy

Safari dışında, -moz-border-radiusve border-radiusdört değerlere sahip bir kısaltma olarak kullanılabilir: 10px 10px 0 0. Ancak Safari için bunları ayrı ayrı ayarlamanız gerekir.

— Yi Jiang

199

Özelliklere göre:

Bir kutunun arka planı (sınır resmi değil), uygun eğriye kırpılır ('arka plan-klip' ile belirlenir). Kenarlığa veya dolgu kenarına yapışan diğer efektler ('görünür' dışındaki 'taşma' gibi) de eğriye kırpılmalıdır. Değiştirilen öğelerin içeriği her zaman içerik kenarı eğrisine kesilir. Ayrıca, kenar kenarı eğrisinin dışındaki alan, öğe adına fare olaylarını kabul etmez.

http://www.w3.org/TR/css3-background/#the-border-radius

Bu, overflow: hiddenaçık bir #outerişlemin çalışması gerektiği anlamına gelir . Ancak, bu Firefox 3.6 ve önceki sürümleri için çalışmaz. Bu Firefox 4'te düzeltildi:

Yuvarlatılmış köşeler artık içeriği ve görüntüleri kırpıyor (taşma varsa: görünür ayarlanmadı).

https://developer.mozilla.org/en/CSS/-moz-border-radius

Yani düzeltmeye hala ihtiyacınız olacak, sadece kısaltın:

#outer {
  overflow: hidden;
}

#inner {
  -moz-border-radius: 10px 10px 0 0;
}

Burada çalıştığını görün: http://jsfiddle.net/VaTAZ/3/

— Yi Jiang
kaynak

1

Bingo, Firefox 3.6 ile test yapıyordum. Yani bu açıklıyor.

— Daniel Bingham

1

Oyunda bu kadar geç gelen herkes overflow: hidden;, mevcut FF sürümleri üzerinde çalışıyor. Gereksinimleriniz doğrultusunda test ettiğinizden emin olun.

— BillyNair

Sadece overflow hidden

— kemanın

Taşma içeriğinin gizlenmesini istemezsek ne olur? Gizli bir taşma, araç ipucu açılır pencereleri ve içinde görünen pencere menüleri gibi şeyleri keser.

— mae

1

Sadece taşma ekleyin: gizli; ve dış yarıçapa sınır yarıçapı

— Nader

1

Bunun nesi yanlış olurdu?

#outer { 
    display: block; float: right; margin: 0; width: 200px;
    background-color: white; overflow: hidden;
}
#inner { background-color: #209400; height: 10px; border-top: none; }

#outer, #inner{
    -moz-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
}

— Jarrett Widman
kaynak

Tabanın keskin köşeli olmasını istiyorum. Bu, biri diğerinin üzerine binmek için negatif bir marj verildiğinde iki iç div alır.

— Daniel Bingham

Hmm ... çıkıyor ki tek tek köşeler ayarlayabilirsiniz. Bu yüzden sadece ilk ikisini ayarladım.

— Daniel Bingham

1

Altta keskin kenarlar istiyorsanız: Bunları kullanın:

sınır-üst-sol yarıçapı: 10 piksel;
sınır-üst-sağ yarıçap: 10 piksel; 

-moz ötesi yarıçap topleft
-moz ötesi yarıçap topright

— tdtje
kaynak

0

pozisyonu yapmaya çalıştınız mı: iç div için göreceli ???

yani:

#inner { 
    background-color: #209400; 
    height: 10px; 
    border-top: none; 
    position: relative; 
    left: 15px; 
    top: 15px; 
}

— Nefret popo
kaynak