Các vấn đề về cắt đường viền CSS3

Question

Tôi có một div có bán kính đường viền được đặt thành một giá trị nào đó (giả sử 10px) và div lồng nhau có chiều rộng và chiều cao đầy đủ của cha mẹ.

<!-- ... --> 
<style type="text/css"> 
div.parent { 
    display: block; 
    position: relative; 
    width: 100px; 
    height: 100px; 
    border-radius: 10px; 
    background: #0000ff; 
    overflow: hidden; 
} 
div.inner { 
    display: block; 
    position: relative; 
    width: 100%; 
    height: 100%; 
    background: #ff0000; 
} 
</style> 
<!-- ... --> 
<div class="parent"> 
    <div class="inner"></div> 
</div> 
<!-- ... --> 

Tôi nhận thấy rằng cha mẹ không cắt con xung quanh các góc tròn, mặc dù tràn được đặt thành ẩn. Một chủ đề stackoverflow chỉ ra rằng hành vi này là "bởi thiết kế":

How do I prevent an image from overflowing a rounded corner box with CSS3?

Tuy nhiên, khi đào lên dự thảo làm việc cho nền CSS3 và biên giới ...

http://www.w3.org/TR/css3-background/#corner-clipping

... Tôi không thể không chú ý đến mô tả sau theo "Góc cắt" phần:

hiệu ứng khác mà clip vào biên giới hoặc đệm cạnh (chẳng hạn như ‘tràn’ khác hơn là ‘nhìn thấy’) cũng phải cắt với đườ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

Vì vậy, tôi thiếu gì? Nội dung có được cắt bớt các góc không? Tôi có đang xem thông tin lỗi thời không? Tôi có làm sai không?

Answer 1

Nó không phải theo thiết kế, có một outstanding defect in Firefox về điều này. Nên làm việc OK trong bất kỳ trình duyệt WebKit nào. Trong Firefox, bạn phải thêm bán kính đường viền vào phần tử đã chứa, hoặc use some sort of hack.

Answer 2

Nếu bạn xóa position: relative; trên cả hai phần tử, phần tử bên ngoài sẽ cắt con xung quanh các góc được làm tròn. Không chắc chắn tại sao và nếu đó là lỗi.

Answer 3

Tôi đến đây tìm kiếm một câu trả lời vì tôi đã có một vấn đề tương tự trong Chrome 18.

Tôi đã cố gắng để có một hộp tròn với hai yếu tố bên trong của nó - tiêu đề và số index - với số chỉ số vị trí hoàn toàn ở góc dưới bên trái của hộp.

Những gì tôi nhận thấy là nếu tôi có HTML như thế này, các yếu tố tiêu đề sẽ chảy máu bên ngoài các góc bo tròn (border-radius) mặc dù tràn được thiết lập để ẩn trên yếu tố phụ huynh:

<a> 
    <div style="overflow:hidden; border-radius:15px; position:relative;"> 
     <div id="title" style="text-align:center;">Box Title</div> 
     <div id="index" style="position:absolute; top:80px;">1</div> 
    </div> 
</a> 

Nhưng nếu tôi đã di chuyển vị trí tương đối lên một phần tử gốc, mọi thứ trông đẹp mắt:

<a style="position:relative;"> 
    <div style="overflow:hidden; border-radius:15px;"> 
     <div id="title" style="text-align:center;">Box Title</div> 
     <div id="index" style="position:absolute; top:80px;">1</div> 
    </div> 
</a> 

Answer 4

Chỉ muốn kêu gọi điều này vì tôi thấy vấn đề này có cùng vấn đề.

Trong div có bộ tràn được cuộn để cuộn, bán kính đường viền không cắt nội dung trong khi cuộn trừ khi nội dung được cuộn đến đầu hoặc cuối tuyệt đối. Thậm chí sau đó, các clipping chỉ đôi khi xuất hiện trở lại nếu tôi cuộn tài liệu đến đầu hoặc cuối tuyệt đối là tốt.

Trên một lark, tôi đã thêm đường viền trong suốt vào phần tử và dường như thực thi việc cắt trên các góc. Vì tôi đã có một số khoảng trống xung quanh phần tử, tôi chỉ cắt một nửa và áp dụng phần còn lại cho độ dày biên giới. Không lý tưởng, nhưng tôi đã kết thúc với kết quả tôi muốn.

Đã thử nghiệm trong Chrome, Safari và Firefox trên máy Mac.