Zmuszanie dziecka do przestrzegania zakrzywionych granic rodzica w CSS

135

Mam element div w innym div. #outeri #inner. #outerma zakrzywione krawędzie i białe tło. #innernie ma zakrzywionych granic i zielonego tła. #innerwykracza poza zakrzywione granice #outer. Czy można to zatrzymać?

#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>

Rozwiń fragment

Bez względu na to, jak próbuję, nadal się pokrywa. Jak mogę #innerbyć posłuszny i wypełnić #outergranice?

edytować

Poniższy hack służył teraz temu celowi. Ale pozostaje pytanie (być może dla twórców CSS3 i przeglądarek internetowych): Dlaczego elementy potomne nie przestrzegają zakrzywionych granic swoich rodziców i czy w ogóle można je do tego zmusić?

Aby obejść to na razie dla moich potrzeb, możesz przypisać krzywe do poszczególnych granic. Więc dla moich celów przypisałem krzywą do dwóch górnych części elementu wewnętrznego.

#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
źródło

Czy próbowałeś ustawić dokładnie ten sam promień obramowania dla elementu wewnętrznego?

— Daniel O'Hara

1

Ale chcę, aby promień graniczny elementu wewnętrznego był prosty na dole. Czy można ustawić promień obramowania tylko dla określonego narożnika?

— Daniel Bingham,

Na pewno. Możesz nawet przypisać im polubienie border-radius: TL TR BL BR.

— Daniel O'Hara,

29

Czytam to jako „Zmuszanie dziecka do wykonywania rozkazów rodziców”. :)

— Bennor McCarthy,

Z wyjątkiem Safari, -moz-border-radiusi border-radiusmogą być używane jako skrót z czterech wartości: 10px 10px 0 0. Jednak w przypadku Safari musisz ustawić je indywidualnie.

— Yi Jiang,

198

Zgodnie ze specyfikacją:

Tła pola, ale nie jego obramowanie, są przycinane do odpowiedniej krzywej (określonej przez „background-clip”). Inne efekty, które przycinają się do obramowania lub krawędzi wypełnienia (takie jak „przepełnienie” inne niż „widoczne”) również muszą być przycinane do krzywej. Zawartość zastępowanych elementów jest zawsze przycinana do krzywej krawędzi zawartości. Ponadto obszar poza krzywą krawędzi granicznej nie akceptuje zdarzeń myszy w imieniu elementu.

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

Oznacza to, że overflow: hiddenon #outerpowinien działać. Jednak to nie zadziała w przeglądarce Firefox 3.6 i starszych. Problem ten został rozwiązany w przeglądarce Firefox 4:

Zaokrąglone rogi przycinają teraz zawartość i obrazy (jeśli przepełnienie: widoczne nie jest ustawione).

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

Nadal będziesz potrzebować poprawki, po prostu skróć ją do:

#outer {
  overflow: hidden;
}

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

Zobacz, jak działa tutaj: http://jsfiddle.net/VaTAZ/3/

— Yi Jiang
źródło

1

Bingo, testowałem z przeglądarką Firefox 3.6. Więc to wyjaśnia.

— Daniel Bingham,

1

Każdy, kto pojawi się w tak późnej fazie gry, overflow: hidden;pracuje nad aktualnymi wersjami FF. Upewnij się, że wykonałeś testy tak daleko, jak wymagają tego Twoje wymagania.

— BillyNair

Chcę tylko zauważyć, że skrzypce mają margines, więc prawdziwy efekt overflow hiddenjest ukryty

— user10089632

A co, jeśli nie chcemy, aby zawartość przepełnienia była ukryta? Ukryty przepełnienie odetnie takie rzeczy, jak wyskakujące okienka z podpowiedziami i menu okien, które pojawiają się w środku.

— mae

1

Po prostu dodaj przepełnienie: ukryte; i border-radius do zewnętrznego DIV

— Nader

1

Co w tym złego?

#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
źródło

Chcę, żeby spód był ostro zakręcony. Wymagałoby to dwóch wewnętrznych elementów div, z których jeden miałby ujemny margines, aby zachodził na drugi.

— Daniel Bingham,

Hmm ... okazuje się, że można ustawić indywidualne rogi. Więc ustawiłem dwie pierwsze.

— Daniel Bingham,

1

Jeśli chcesz mieć ostre krawędzie na dole: użyj tych:

border-top-left-radius: 10px;
border-top-right-radius: 10px; 

-moz-border-radius-topleft
-moz-border-radius-topright

— tdtje
źródło

0

czy próbowałeś ustawić pozycję: względna dla wewnętrznego div ???

to jest:

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

— Naveed Butt
źródło