圓角四周的箱影？

我正在使用Twitter的Bootstrap庫快速將原型放在一起。圓角四周的箱影？

這裏是我的佈局看起來像在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>

這裏就是我的LESS的樣子：

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

什麼是真正奇怪的是，陰影是不是周圍的子元素的彎曲彎曲角處：

enter image description here

如何我可以在彎道上彎曲嗎？

來源

2012-05-13 Naftuli Kay

增加框陰影數 – Bongs

也許在按鈕後面沒有被邊界半徑限制的漸變背景？我不能使用你在問題中給出的代碼重現問題，請參閱[this jsfiddle]（http://jsfiddle.net/53kDh/1/）。（在FF和IE9中測試過，你沒有在你的問題中提及特定的瀏覽器。） – Jeroen

@Jeroen：你的小提琴與這裏的代碼不匹配。在這個問題中，盒子陰影在父元素上。在你的小提琴中，盒子陰影只適用於'div.alert'元素。 – BoltClock

你的div.navbar div.navbar-messages元素缺乏圓角，所以陰影看起來是方形的。如其名稱所示，box-shadow在元素的框周圍繪製陰影，而不是元素的內容，因此如果框本身不具有圓角，那麼它的陰影也不會。

您可以嘗試採用同樣的border-radius樣式div.navbar div.navbar-messages一樣，所以它的陰影將圍繞拐角曲線：

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

來源

2012-05-13 19:24:39 BoltClock

我注意到你將params傳入你的css例子。我做了一個快速搜索，沒有找到有用的東西。這是爲了證明概念還是實際上你可以做的事情？ – Jacksonkr

@傑克遜：這是一個很少的功能。我只是注意到現在問題沒有被標記[更少]，所以我已經添加了。你可以在這裏閱讀：http://lesscss.org/#-parametric-mixins – BoltClock

是的...只是把邊界半徑上有陰影的格。確保邊界半徑值與div內對象的邊界半徑值相匹配，並且它們將正確匹配。

來源

2013-09-22 20:24:57 user2703774

我有這樣的：

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;

爲我工作得很好！非常感謝。

來源

2016-11-11 14:25:39

圓角四周的箱影？

回答

相關問題