Css 倒圆引导3个旋转木马角
我正在尝试样式引导3旋转木马与CSS有圆角。我能够使旋转木马中图像的角变圆,但由于某些原因,旋转木马的背景边缘仍然未被旋转。我做错了什么Css 倒圆引导3个旋转木马角,css,twitter-bootstrap,Css,Twitter Bootstrap,我正在尝试样式引导3旋转木马与CSS有圆角。我能够使旋转木马中图像的角变圆,但由于某些原因,旋转木马的背景边缘仍然未被旋转。我做错了什么 <style type="text/css"> .carousel { border-radius: 55px 55px 55px 55px; height: 500px; margin-bottom: 60px; margin-top: 40px; margin-left: 200px; margi
<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>
旋转木马{
边界半径:55px 55px 55px 55px;
高度:500px;
边缘底部:60px;
边缘顶端:40px;
左边距:200px;
右边距:200px;
}
/*由于定位图像,我们需要帮助解决标题问题*/
.旋转木马标题{
z指数:10;
}
/*由于img元素的定位而声明高度*/
.carousel.项目{
宽度:100%;
高度:500px;
背景色:#777;
}
.carousel-inner>.item>img{
位置:绝对位置;
排名:0;
左:0;
最小宽度:100%;
高度:500px;
}
@介质(最小宽度:768px){
.carousel标题p{
边缘底部:20px;
字号:21px;
线高:1.4;
}
}
img{
边界半径:55px 55px 55px 55px;
}
添加此项后,它应该可以工作。您需要隐藏溢出:
.carousel{
边界半径:55px 55px 55px 55px;
溢出:隐藏;
...
}
.carousel控件{
位置:绝对位置;
排名:0;
左:0;
底部:0;
宽度:15%;
不透明度:.5;
过滤器:α(不透明度=50);
字体大小:20px;
颜色:#fff;
文本对齐:居中;
文本阴影:0 1px2pRGBA(0,0,0,0.6);
边界半径:9px;用于最佳、最简单的解决方案
.carousel .item {
border-radius: 10px;
background-color: rgba(0,0,0,0);
overflow: hidden;
}
.carousel-control {
border-radius: 10px;
}
以上这些对我都不起作用,因为幻灯片在滑动后才变圆,但在滑动时仍然显示出方形边缘。对我来说,以下这些很有魅力
.carousel-inner {
border-radius: 25px;
background-color: rgba(0,0,0,0);
overflow: hidden;
}
我经常使用浏览器检查器。查看样式和属性以及它们来自何处,以找出是否无法获得清晰的答案。尝试从那里强制使用样式,因为可能有什么内容被覆盖了。这个答案为我解决了问题:是的,这应该有效。James的建议不应该有效如果你没有真正绕过容器。那么你可能会在动画方面遇到问题。也许。@Webice没有,我在回答之前测试了它,这根本不会影响动画。你可以通过浏览器的元素检查器在官方旋转木马示例上应用边界半径
和溢出
:默认情况下不适用动画,但当你有幻灯片/淡出时,淡出不起作用。你应该添加一些解释,说明为什么你的答案是最好的,或者它是如何工作的;而不仅仅是张贴代码。
.carousel .item {
border-radius: 10px;
background-color: rgba(0,0,0,0);
overflow: hidden;
}
.carousel-control {
border-radius: 10px;
}
.carousel-inner {
border-radius: 25px;
background-color: rgba(0,0,0,0);
overflow: hidden;
}