Html 圆角周围的框阴影？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10574126/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Box shadow around rounded corners?
提问by Naftuli Kay
I'm using Twitter's Bootstrap library to quickly throw together a prototype.
我正在使用 Twitter 的 Bootstrap 库来快速组合一个原型。
Here's what my layout looks like in HTML:
这是我的布局在 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>
Here's what my LESS looks like:
这是我的 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;
}
What's really weird is that the drop shadow isn't curving around the child element's curved corners:
真正奇怪的是阴影并没有围绕子元素的弯曲角弯曲：
How can I make it properly curve around the corners?
我怎样才能让它在拐角处正确弯曲？
回答by BoltClock
Your div.navbar div.navbar-messageselement lacks rounded corners, so the shadow appears square. As described by its name, box-shadowdraws a shadow around the element's box, and not the element's contents, so if the box itself doesn't have rounded corners, then neither will its shadow.
你的div.navbar div.navbar-messages元素没有圆角，所以阴影看起来是方形的。正如它的名字所描述的，box-shadow在元素的box周围绘制一个阴影，而不是元素的content，所以如果 box 本身没有圆角，那么它的阴影也不会。
You can try applying the same border-radiusstyles to div.navbar div.navbar-messagesas well, so its shadow will curve around the corners:
你也可以尝试应用相同的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;
}
回答by Paulo Henrique
I have this:
我有这个：
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;
}
So:
所以：
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
That worked for me pretty well! Thanks a lot.
这对我很有效！非常感谢。
回答by user2703774
yep...just put a border-radius on the div that has the shadow. Make sure border-radius value matches that of the object inside the div and they will match up properly.
是的...只需在具有阴影的 div 上放置一个边框半径。确保 border-radius 值与 div 内对象的值匹配，它们将正确匹配。
