Yuvarlatılmış köşeler etrafında kutu gölgesi?

Twitter prototipini bir araya getirmek için Twitter Bootstrap kütüphanesini kullanıyorum.Yuvarlatılmış köşeler etrafında kutu gölgesi?

İşte

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

gibi benim AZ görünüyor ne::

İşte benim düzeni HTML gibi görünür

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

Gerçekten garip olan gölge alt öğe etrafta eğri olmadığını kavisli köşeler:

enter image description here

nasıl Köşelerin etrafında düzgün eğri yapabilir miyim?

kaynak

2012-05-13 Naftuli Kay

kutu gölge sayısını artır – Bongs

Düğme arkasında, kenarlık yarıçapı tarafından kırpılmayan bir degrade arka plan var mı? Soruda verdiğiniz kodu kullanarak sorunu yeniden oluşturamıyorum, bkz. [Bu jsfiddle] (http://jsfiddle.net/53kDh/1/). (FF ve IE9'da test edilmiştir, sorunuzda belirli bir tarayıcıdan bahsetmezsiniz.) – Jeroen

@Jeroen: Kemanın kodu burada eşleşmiyor. Bu soruda, kutu gölgesi bir ana öğenin üzerindedir. Kemanınızda, kutu gölgesi sadece 'div.alert' öğeleri için geçerlidir. – BoltClock

div.navbar div.navbar-messages öğenizin yuvarlatılmış köşeleri yoktur, böylece gölge kare görünür. Adından da anlaşılacağı gibi,, öğenin kutusu öğesinin çevresinde bir gölge çizer ve öğenin içeriği değil, kutunun köşeleri yuvarlanmamışsa, o zaman gölgesi de olmaz.

Siz de div.navbar div.navbar-messages aynı border-radius stiller uygulayarak deneyebilirsiniz

, onun gölgesi köşelerde eğri böylece:

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

kaynak

2012-05-13 19:24:39 BoltClock

Paramizi css örneğinize aktardığınızı fark ettim. Hızlı bir arama yaptım ve yararlı bir şey bulamadım. Bu kavramın kanıtı için mi yoksa aslında yapabileceğiniz bir şey mi? – Jacksonkr

@Jackson: Bu bir LESS özelliği. Şimdi sadece sorunun etiketlenmediğini fark ettim [az], bu yüzden bunu ekledim. Buradan okuyabilirsiniz: http://lesscss.org/#-parametric-mixins – BoltClock

evet ... sadece gölgesi vardır div üzerinde border-radius koymak . Sınır yarıçapı değerinin, div içindeki nesneninkiyle eşleştiğinden ve düzgün şekilde eşleşeceklerinden emin olun.

kaynak

2013-09-22 20:24:57 user2703774

bu var: Yani

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

: oldukça iyi benim için çalıştı

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

! Çok teşekkürler.

kaynak

2016-11-11 14:25:39

Yuvarlatılmış köşeler etrafında kutu gölgesi?

cevap

İlgili konular