去除bootstrap轮播图两侧阴影

哆梦没有口袋

于 2019-09-14 19:39:07 发布

阅读量928

点赞数 1

本文链接：https://blog.csdn.net/qq_41795427/article/details/100833871

版权

本文针对Bootstrap轮播图两侧的阴影问题提供了解决方案。通过修改轮播控制的class为id，并定制相应的CSS样式，成功移除阴影，达到理想的显示效果。

摘要由CSDN通过智能技术生成

用bootstrap的轮播图很方便，但是有个地方不好的是，它的两侧有阴影，太难看了。

找了一下网上的说法：

.carousel-control.left {
  /*background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);*/
  background-image:none;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
.carousel-control.right {
  left: auto;
  right: 0;
  /*background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%,