我正在使用Twitter的Bootstrap库快速将原型放在一起.
这是我的布局在HTML中的样子：
<div class="navbar-messages container">
<div class="alert alert-info fade in">
<button class="close" data-dismiss="alert">×</button>
<strong>Awesomeness!</strong> You're pretty cool.
</div>
<div class="alert alert-error fade in">
<button class="close" data-dismiss="alert">×</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.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;
}
真正奇怪的是,阴影不会绕着孩子元素的弯曲角落弯曲：
如何使角落正确弯曲？
解决方法
您的div.navbar div.navbar-messages元素缺少圆角,因此阴影显示为正方形.如其名称所示,Box-shadow在元素的框中绘制阴影,而不是元素的内容,因此如果框本身没有圆角,那么它的阴影也不会.
您可以尝试将相同的边框半径样式应用于div.navbar div.navbar-messages,因此它的阴影将在拐角处曲线：
div.navbar div.navbar-messages {
.drop-shadow(1px 1px 10px 1px rgba(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;
}
