我明白你遇到的麻烦——在Angular里用ngbCarousel时，自定义CSS要么不生效，要么箭头位置调不动。这主要是因为Angular的视图封装机制和ngbCarousel默认样式的优先级问题，咱们一步步来解决：

一、先搞定CSS不生效的问题 #

Angular组件的CSS默认只会作用于当前组件的元素，ngbCarousel的内部元素（比如.carousel-control-prev）属于第三方组件，所以你的样式无法穿透进去。解决办法是用::ng-deep来强制穿透视图封装：

注意：虽然::ng-deep在部分Angular版本被标记为deprecated，但目前仍是穿透组件样式最便捷的方式；如果不想用它，也可以把样式放到全局的styles.css里，但要注意避免影响其他组件。

二、调整箭头到图片外侧 #

ngbCarousel的默认导航按钮是绝对定位在容器边缘的，咱们可以修改它们的left和right值，把箭头推到图片外面：

::ng-deep .carousel-control-prev {
  left: -50px; /* 向左移出容器，数值可根据你的布局调整 */
}

::ng-deep .carousel-control-next {
  right: -50px; /* 向右移出容器，数值可根据你的布局调整 */
}

三、修改箭头颜色 #

默认的箭头是用背景图实现的，直接改background-color可能看不到效果，这里提供两种简单的修改方案：

方案1：替换箭头背景图（直接改颜色） #

把默认的箭头背景图换成黑色的SVG，你也可以替换成任意颜色：

::ng-deep .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
}

::ng-deep .carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");
}

其中fill='%23000'代表黑色，换成%23ff0000就是红色，以此类推。

方案2：用伪元素自定义箭头（更灵活） #

如果不想用背景图，也可以隐藏默认图标，用伪元素生成箭头：

::ng-deep .carousel-control-prev-icon,
::ng-deep .carousel-control-next-icon {
  display: none; /* 隐藏默认图标 */
}

::ng-deep .carousel-control-prev::before {
  content: "<";
  color: #000; /* 箭头颜色 */
  font-size: 30px;
  font-weight: bold;
}

::ng-deep .carousel-control-next::before {
  content: ">";
  color: #000; /* 箭头颜色 */
  font-size: 30px;
  font-weight: bold;
}

四、完整的component.css代码 #

把上面的内容整合起来，最终的CSS应该是这样的：

/* 穿透视图封装，修改ngbCarousel内部样式 */
::ng-deep .carousel-control-prev {
  left: -50px;
}

::ng-deep .carousel-control-next {
  right: -50px;
}

/* 替换箭头颜色为黑色 */
::ng-deep .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
}

::ng-deep .carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");
}

/* 可选：优化按钮hover效果 */
::ng-deep .carousel-control-prev:hover,
::ng-deep .carousel-control-next:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

五、小优化建议 #

你HTML里的图片内联样式（比如width="300px"、float:left）可以移到CSS里，更易于维护：

.picsum-img-wrapper img {
  width: 300px;
  height: 300px;
  float: left;
  margin-left: 10px;
}
/* 不同slide的特殊间距可以加类名区分 */
.picsum-img-wrapper.second-img img {
  margin-left: 50px;
}

内容的提问来源于stack exchange，提问作者Techdive