我正在使用 Twitter 的 Bootstrap 库快速构建原型(prototype)。
这是我的布局在 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, 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;
}
真正奇怪的是投影没有围绕子元素的 flex Angular flex :
如何让它在拐 Angular 处正确 flex ?
最佳答案
您的 div.navbar div.navbar-messages
元素缺少圆 Angular ,因此阴影显示为正方形。如其名称所述,box-shadow
在元素的 box 周围绘制阴影,而不是元素的 contents,因此如果框本身不'有圆 Angular ,那么它的影子也不会。
您也可以尝试将相同的 border-radius
样式应用到 div.navbar div.navbar-messages
,因此它的阴影会在拐 Angular 处 flex :
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;
}
关于html - 圆 Angular 周围的盒子阴影?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10574126/