गोलाकार कोनों के चारों ओर बॉक्स छाया?

Question

मैं एक प्रोटोटाइप को तुरंत फेंकने के लिए ट्विटर की बूटस्ट्रैप लाइब्रेरी का उपयोग कर रहा हूं।

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

यहाँ की तरह मेरे कम दिखता है::

यहाँ मेरी लेआउट दिखता HTML में की तरह है

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

क्या वास्तव में अजीब है कि ड्रॉप छाया चाइल्ड तत्व के चारों ओर curving नहीं है घुमावदार कोनों:

कैसे क्या मैं इसे कोनों के चारों ओर ठीक से वक्र बना सकता हूं?

Answer 1

आपके div.navbar div.navbar-messages तत्व में गोलाकार कोनों की कमी है, इसलिए छाया चौकोर दिखाई देती है। जैसा कि इसके नाम से वर्णित है, box-shadow तत्व के बॉक्स के चारों ओर एक छाया खींचता है, और तत्व की सामग्री नहीं है, इसलिए यदि बॉक्स में गोलाकार कोनों नहीं हैं, तो न ही इसकी छाया होगी।

साथ ही आप div.navbar div.navbar-messages के लिए एक ही border-radius शैलियों लागू करने की कोशिश कर सकते हैं, तो अपनी छाया चारों कोनों वक्र होगा:

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

हां ... बस एक बॉर्डर-त्रिज्या div छाया है पर डाल । सुनिश्चित करें कि सीमा-त्रिज्या मान div के अंदर ऑब्जेक्ट से मेल खाता है और वे ठीक से मेल खाते हैं।

Answer 3

मैं इस है:

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

तो:

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

वह मेरे लिए बहुत अच्छी तरह से काम किया! बहुत बहुत धन्यवाद।