twitter-bootstrap 舍入 Bootstrap 3 旋转木马角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25428918/
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
Rounding Bootstrap 3 Carousel Corners
提问by Burntspaghetti
I am trying to style a Bootstrap 3 carousel with CSS to have rounded corners. I am able to round the corners of the images in the carousel, but for some reason the background carousel edges remain unrounded. What am I doing wrong here?
我正在尝试使用 CSS 为 Bootstrap 3 轮播设置圆角样式。我能够将轮播中图像的角变圆，但由于某种原因，背景轮播边缘保持不圆润。我在这里做错了什么？
<style type="text/css">
.carousel {
border-radius: 55px 55px 55px 55px;
height: 500px;
margin-bottom: 60px;
margin-top: 40px;
margin-left: 200px;
margin-right: 200px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
width: 100%;
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
@media (min-width: 768px) {
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
}
img {
border-radius: 55px 55px 55px 55px;
}
</style>
<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="30000" data-pause="hover">
<!-- Menu -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Items -->
<div class="carousel-inner">
<div class="item active">
<img src="images/image3.jpg" alt="Slide 1" />
</div>
<div class="item">
<img src="images/image7.jpg" alt="Slide 2" />
</div>
<div class="item">
<img src="images/image6.jpg" alt="Slide 3" />
</div>
</div>
<a href="#carousel" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#carousel" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
回答by James Donnelly
You need to hide the overflow:
您需要隐藏溢出：
.carousel {
border-radius: 55px 55px 55px 55px;
overflow: hidden;
...
}
回答by Chris
None of the above worked for me as the slides only got rounded after sliding, but still showed square edges on sliding. For me the following worked like a charm.
以上都不对我有用，因为幻灯片在滑动后才变圆，但在滑动时仍然显示方形边缘。对我来说，以下工作就像一个魅力。
.carousel-inner {
border-radius: 25px;
background-color: rgba(0,0,0,0);
overflow: hidden;
}
回答by Webice
/* Declare heights because of positioning of img element */
.carousel .item {
width: 100%;
height: 500px;
background-color: #777;
border-radius: 55px 55px 55px 55px;
}
Add this and it should work.
添加它，它应该可以工作。
回答by ziaprog
.carousel-control {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 15%;
opacity: .5;
filter: alpha(opacity=50);
font-size: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,0.6);
border-radius: 9px; <---- or whatever
}
回答by Sitan
For the best, simplest solution!!!
为了最好，最简单的解决方案！！！
.carousel .item {
border-radius: 10px;
background-color: rgba(0,0,0,0);
overflow: hidden;
}
.carousel-control {
border-radius: 10px;
}
