圆角四周的箱影？

我正在使用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

圆角四周的箱影？

回答

相关问题