Javascript 更改div/img的外观

下面是第一张图片（绿色图片）的代码。我想修改方框，使其看起来像图2中的方框（中间有红色的那个）

我应该在

img

或'id'中添加另一个类吗？如何修改第一张图中的框，使它们看起来像第二张图中的框

我应该在CSS文件中编写什么样的代码来改变它们的外观

$（文档）.ready（函数（）{
$（'.carousel'）.carousel（）；
});
.carousel项目{
位置：绝对位置；
背景：绿色；
}
img{
宽度：150px；
位置：相对位置；
边界半径：10px；
}

width、height、z-index、box shadow是您需要使用的属性。我将让你们来试验一下上面提到的这些@sinanspd。在你尝试了这些，但无法理解之后，再写下另一个问题，尝试使用它们。@sinanspd，谢谢你，我确实尝试过这些，而我现在面临的问题是，当我玩高度和宽度时，它会改变所有这些，尽管我只希望侧边的稍微小一点。有什么我遗漏的吗/首先，用你尝试过的内容编辑你的问题，我们不能随意猜测出哪里出了问题。虽然一个有根据的猜测是您正在设置
.carousel项目的样式
，但您需要通过
id
或
n个孩子
分别设置它们的样式，我同意@sinanspd。然而，为了更清楚一点，他们说的是每个div类都是相同的（“carousel项”），所以当您更改CSS中某个类的样式时，它会更改web页面上所有类的样式。您可以尝试更改ID样式（例如，首先在CSS中更改.carousel item#two{}）