Bóng hộp xung quanh các góc tròn?

Question

Tôi đang sử dụng thư viện Bootstrap của Twitter để nhanh chóng ném một mẫu thử nghiệm.

Đây là những gì bố trí của tôi trông giống như trong HTML:

<div class="navbar-messages container"> 
    <div class="alert alert-info fade in"> 
     <button class="close" data-dismiss="alert">&times;</button> 
     <strong>Awesomeness!</strong> You're pretty cool. 
    </div> 
    <div class="alert alert-error fade in"> 
     <button class="close" data-dismiss="alert">&times;</button> 
     <strong>Awesomeness!</strong> You're pretty cool. 
    </div> 
</div> 

Đây là những gì có vẻ ít tôi như:

div.navbar div.navbar-messages { 
    .drop-shadow(1px 1px 10px 1px rgba(0, 0, 0, 0.2)); 

    div.alert { 
     -webkit-border-radius: 0px; 
     -moz-border-radius: 0px; 
     border-radius: 0px; 

     margin-bottom: 0px; 

     &:last-child { 
      -webkit-border-bottom-right-radius: 4px; 
      -webkit-border-bottom-left-radius: 4px; 
      -moz-border-radius-bottomright: 4px; 
      -moz-border-radius-bottomleft: 4px; 
      border-bottom-right-radius: 4px; 
      border-bottom-left-radius: 4px; 
     } 
    } 
} 

.drop-shadow(@params) { 
    -moz-box-shadow: @params; 
    -webkit-box-shadow: @params; 
    box-shadow: @params; 
} 

Điều thực sự kỳ lạ là các hiệu ứng bóng đổ không được uốn cong xung quanh các yếu tố của con các góc cong:

Cách thức Tôi có thể làm cho nó cong quanh các góc không?

Answer 1

Phần tử div.navbar div.navbar-messages thiếu góc tròn, do đó bóng sẽ xuất hiện hình vuông. Như được mô tả bằng tên của nó, box-shadow vẽ một bóng xung quanh hộp của phần tử và không phải là nội dung của phần tử, vì vậy nếu chính hộp đó không có góc tròn, thì bóng sẽ không bị bóng.

Bạn có thể thử áp dụng cùng border-radius phong cách để div.navbar div.navbar-messages là tốt, vì thế cái bóng của nó sẽ làm cong xung quanh các góc:

div.navbar div.navbar-messages { 
    .drop-shadow(1px 1px 10px 1px rgba(0, 0, 0, 0.2)); 
    .rounded-bottom-corners(4px); 

    div.alert { 
     -webkit-border-radius: 0px; 
     -moz-border-radius: 0px; 
     border-radius: 0px; 

     margin-bottom: 0px; 

     &:last-child { 
      .rounded-bottom-corners(4px); 
     } 
    } 
} 

.drop-shadow(@params) { 
    -moz-box-shadow: @params; 
    -webkit-box-shadow: @params; 
    box-shadow: @params; 
} 

.rounded-bottom-corners(@params) { 
    -webkit-border-bottom-right-radius: @params; 
    -webkit-border-bottom-left-radius: @params; 
    -moz-border-radius-bottomright: @params; 
    -moz-border-radius-bottomleft: @params; 
    border-bottom-right-radius: @params; 
    border-bottom-left-radius: @params; 
} 

Answer 2

vâng ... chỉ cần đặt một border-radius trên div có cái bóng . Đảm bảo giá trị bán kính đường viền khớp với giá trị của đối tượng bên trong div và chúng sẽ khớp đúng cách.

Answer 3

Tôi có điều này:

blockquote { 
    border: none; 
    font-style: italic; 
    font-size: 20px; 
    line-height: 40px; 
    font-weight: 300; 
    padding: 0; 
    margin: 30px 0; 
    text-shadow: 0 1px 1px #666666; 
    background: rgba(255,255, 255, 0.4); 
    box-shadow: 0px 0.5px 1px #888888; 
    padding-left: 10px; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 
} 

Vì vậy:

-webkit-border-radius: 6px; 
     -moz-border-radius: 6px; 
     border-radius: 6px; 

Đó làm việc cho tôi khá tốt! Cảm ơn rất nhiều.