Buộc trẻ tuân theo đường viền cong của cha mẹ trong CSS

Question

Tôi có một div bên trong div khác. #outer và #inner. #outer có đường viền cong và nền trắng. #inner không có đường viền cong và nền màu xanh lục. #inner mở rộng ra ngoài đường viền cong của #outer. Có cách nào để ngăn chặn điều này?

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

 

 

Không có vấn đề làm thế nào tôi thử nó vẫn chồng chéo. Làm cách nào để tôi có thể thực hiện #inner tuân theo và điền vào biên giới của #outer?

chỉnh sửa

Các hack sau phục vụ mục đích cho bây giờ. Nhưng câu hỏi là viết tắt (có thể cho các nhà văn CSS3 và webbrowser): Tại sao các phần tử con không tuân theo các đường viền cong của bố mẹ chúng và có bắt buộc chúng phải không?

Bẻ khóa để giải quyết vấn đề này cho nhu cầu của tôi, bạn có thể chỉ định đường cong cho từng đường viền riêng lẻ. Vì vậy, với mục đích của tôi, tôi chỉ cần gán một đường cong cho hai phần trên cùng của phần tử bên trong.

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

Answer 1

Theo thông số kỹ thuật:

nền của một hộp, nhưng không phải là hình ảnh biên giới , được cắt bớt thành đường cong thích hợp (như xác định được in bởi ‘background-clip’). Các hiệu ứng khác mà kẹp vào cạnh viền hoặc cạnh đệm (chẳng hạn như 'tràn' khác hơn ‘hiển thị’) cũng phải được ghi vào đường cong . Nội dung của các phần tử được thay thế luôn được cắt thành đường cong cạnh nội dung . Ngoài ra, khu vực bên ngoài đường cong của cạnh biên giới không chấp nhận các sự kiện chuột thay mặt cho của phần tử.

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

Điều này có nghĩa rằng một overflow: hidden trên #outer nên làm việc. Tuy nhiên, điều này sẽ không hoạt động đối với Firefox 3.6 trở xuống. Điều này được khắc phục trong Firefox 4:

Góc tròn bây giờ cắt nội dung và hình ảnh (nếu tràn: hiển thị không được đặt).

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

Vì vậy, bạn sẽ vẫn cần sửa chữa, chỉ cần rút ngắn nó để:

#outer { 
    overflow: hidden; 
} 

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

Xem nó làm việc ở đây: http://jsfiddle.net/VaTAZ/3/

Answer 2

Điều gì sẽ xảy ra với điều này?

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

Answer 3

bạn đã thử đặt vị trí: tương đối cho div bên trong ???

đó là:

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

Answer 4

Nếu bạn muốn cạnh sắc nhọn ở phía dưới: Sử dụng sau đây:

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

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