Memaksa anak untuk mematuhi batas lengkung orangtua di CSS

135

Saya memiliki div di dalam div lain. #outerdan #inner. #outermemiliki batas melengkung dan latar belakang putih. #innertidak memiliki batas melengkung dan latar belakang hijau. #innermeluas melampaui batas melengkung #outer. Apakah ada cara untuk menghentikan ini?

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

Luaskan cuplikan

Tidak peduli bagaimana saya mencobanya masih tumpang tindih. Bagaimana saya bisa #innermematuhi dan memenuhi #outerperbatasan?

sunting

Retas berikut melayani tujuan untuk saat ini. Tetapi pertanyaannya tetap (mungkin untuk penulis CSS3 dan webbrowser): Mengapa elemen anak tidak mematuhi batas lengkung orang tua mereka dan apakah ada cara untuk memaksa mereka melakukannya?

Retas untuk menyiasati ini untuk kebutuhan saya untuk saat ini, Anda dapat menetapkan kurva ke batas individu. Jadi untuk tujuan saya, saya baru saja menetapkan kurva ke dua bagian atas elemen dalam.

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

Sudahkah Anda mencoba mengatur radius perbatasan yang sama persis dengan elemen internal?

— Daniel O'Hara

1

Tapi saya ingin jari-jari perbatasan elemen internal lurus di bagian bawah. Apakah mungkin untuk menetapkan radius batas hanya untuk sudut tertentu?

— Daniel Bingham

Tentunya. Anda bahkan dapat menetapkannya seperti border-radius: TL TR BL BR.

— Daniel O'Hara

29

Saya membaca ini sebagai "Memaksa anak untuk mematuhi perintah orang tua". :)

— Bennor McCarthy

Dengan pengecualian Safari, -moz-border-radiusdan border-radiusdapat digunakan sebagai singkatan dengan empat nilai: 10px 10px 0 0. Namun untuk Safari Anda harus mengaturnya secara individual.

— Yi Jiang

199

Menurut spesifikasi:

Latar belakang kotak, tetapi bukan gambar batasnya, dipotong ke kurva yang sesuai (sebagaimana ditentukan oleh 'klip latar belakang'). Efek lain yang klip ke tepi perbatasan atau padding (seperti 'meluap' selain 'terlihat') juga harus klip ke kurva. Konten elemen yang diganti selalu dipangkas ke kurva tepi konten. Juga, area di luar kurva tepi perbatasan tidak menerima peristiwa mouse atas nama elemen.

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

Ini berarti bahwa overflow: hiddenon #outerharus bekerja. Namun, ini tidak akan berfungsi untuk Firefox 3.6 dan di bawah. Ini diperbaiki di Firefox 4:

Sudut bundar sekarang klip konten dan gambar (jika meluap: terlihat tidak disetel).

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

Jadi, Anda masih perlu memperbaikinya, persingkat menjadi:

#outer {
  overflow: hidden;
}

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

Lihat berfungsi di sini: http://jsfiddle.net/VaTAZ/3/

— Yi Jiang
sumber

1

Bingo, saya sedang menguji dengan Firefox 3.6. Jadi ini menjelaskannya.

— Daniel Bingham

1

Siapa pun yang datang selarut ini, overflow: hidden;sedang mengerjakan versi FF saat ini. Pastikan Anda menguji kembali sejauh kebutuhan Anda.

— BillyNair

Hanya ingin mencatat bahwa biola memiliki margin, sehingga efek sebenarnya overflow hiddendisembunyikan

— user10089632

Bagaimana jika kita tidak ingin konten overflow disembunyikan? Overflow tersembunyi akan memotong hal-hal seperti popup tooltip dan menu jendela yang muncul di dalamnya.

— mae

1

Cukup tambahkan overflow: hidden; dan radius perbatasan ke DIV luar

— Nader

1

Apa yang salah dengan ini?

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

Saya ingin bagian bawahnya menjadi tajam. Ini akan membutuhkan dua div dalam, satu diberi margin negatif untuk tumpang tindih lainnya.

— Daniel Bingham

Hmm ... ternyata Anda bisa mengatur sudut-sudut individual. Jadi saya hanya mengatur dua teratas.

— Daniel Bingham

1

Jika Anda ingin tepi tajam di bagian bawah: Gunakan ini:

batas-atas-kiri-radius: 10px;
border-top-right-radius: 10px; 

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

— tdtje
sumber

0

Sudahkah Anda mencoba membuat posisi: relatif untuk div bagian dalam ???

itu adalah:

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

— Naveed Butt
sumber