Html 仅在一侧的一部分显示长方体阴影

因此，我有一个标题，如下面的代码片段所示

我的问题是，我只希望

a

标记周围的阴影显示在已扩展出其容器

div

的零件上，以创建白色边缘都是一个元素的印象

基本上，我只希望左侧和右侧的阴影从

a

元素的底部转到

div

的底部。同时也显示在

a

元素的底部

如果我的描述功能不起作用，我所追求的内容的屏幕截图：

我试过玩

z-index

，但没能让它工作

我对

z-index

的想法是将

a

推到

div

后面，然后将

img

拉到所有人前面

我更喜欢只使用CSS的解决方案，因为我不想修改html，但如果必须修改，我必须修改

*{
填充：0；
保证金：0；
}
div{
高度：50px；
宽度：100%；
背景：白色；
盒影：0px 0px 5px#000000；
}
a{
显示：内联块；
左边距：30px；
填充：10px；
高度：60px；
背景：白色；
盒影：0px 0px 5px#000000；
}
img{
身高：100%；
}

---

下面是

框阴影

语法

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color 

尝试减小其

扩展半径

，并向

y轴增加阴影


*{
填充：0；
保证金：0；
}
div{
高度：50px；
宽度：100%；
背景：白色；
盒影：0px 0px 5px#000000；
}
a{
显示：内联块；
左边距：30px；
填充：10px；
高度：60px；
背景：白色；
位置：相对位置；
}
a:以前{
内容：“；
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
盒影：0px 0px 5px#000000；
z指数：-1；
}
img{
身高：100%；
}
下面是
框阴影
语法

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color 

尝试减小其
扩展半径
，并向
y轴增加阴影


*{
填充：0；
保证金：0；
}
div{
高度：50px；
宽度：100%；
背景：白色；
盒影：0px 0px 5px#000000；
}
a{
显示：内联块；
左边距：30px；
填充：10px；
高度：60px；
背景：白色；
位置：相对位置；
}
a:以前{
内容：“；
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
盒影：0px 0px 5px#000000；
z指数：-1；
}
img{
身高：100%；
}
您可以通过css
pseudo
元素获得它

只需添加css部分

a:after {
  content:'';
  position:absolute;
  bottom:0px;
  left:0px;
  height:20px;
  display:block;
  width:100%;
  box-shadow:5px 5px 5px -5px #000000;
}
a:before {
  content:'';
  position:absolute;
  bottom:0px;
  left:0px;
  height:20px;
  display:block;
  width:100%;
  box-shadow:-5px 5px 5px -5px #000000;
}


*{
填充：0；
保证金：0；
框大小：边框框；
}
div{
高度：50px；
宽度：100%；
背景：白色；
盒影：0px 0px 5px#000000；
}
a{
显示：内联块；
左边距：30px；
填充：10px；
高度：60px；
背景：白色；
位置：相对位置；
/*盒影：0px 5px 5px-5px 000000*/
}
a:以后{
内容：''；
位置：绝对位置；
底部：0px；
左：0px；
高度：20px；
显示：块；
宽度：100%；
盒影：5px 5px 5px-5px 000000；
}
a:以前{
内容：''；
位置：绝对位置；
底部：0px；
左：0px；
高度：20px；
显示：块；
宽度：100%；
盒影：-5px 5px 5px-5px 000000；
}
img{
身高：100%；
}
您可以通过css
pseudo
元素获得它

只需添加css部分

a:after {
  content:'';
  position:absolute;
  bottom:0px;
  left:0px;
  height:20px;
  display:block;
  width:100%;
  box-shadow:5px 5px 5px -5px #000000;
}
a:before {
  content:'';
  position:absolute;
  bottom:0px;
  left:0px;
  height:20px;
  display:block;
  width:100%;
  box-shadow:-5px 5px 5px -5px #000000;
}


*{
填充：0；
保证金：0；
框大小：边框框；
}
div{
高度：50px；
宽度：100%；
背景：白色；
盒影：0px 0px 5px#000000；
}
a{
显示：内联块；
左边距：30px；
填充：10px；
高度：60px；
背景：白色；
位置：相对位置；
/*盒影：0px 5px 5px-5px 000000*/
}
a:以后{
内容：''；
位置：绝对位置；
底部：0px；
左：0px；
高度：20px；
显示：块；
宽度：100%；
盒影：5px 5px 5px-5px 000000；
}
a:以前{
内容：''；
位置：绝对位置；
底部：0px；
左：0px；
高度：20px；
显示：块；
宽度：100%；
盒影：-5px 5px 5px-5px 000000；
}
img{
身高：100%；
}

编辑：-

使用jquery可以动态计算span的css

Html已修改，在锚定标记下方添加了一个
，并在跨度上添加了阴影


*{
填充：0；
保证金：0；
}
div{
高度：50px；
宽度：100%；
背景：白色；
盒影：0px 0px 5px#000000；
}
a{
显示：内联块；
左边距：30px；
填充：10px；
高度：60px；
背景：白色；
/*盒影：0px 0px 5px#000000*/
z指数：100；
位置：绝对位置；
}
.影子{
显示：内联块；
左边距：30px；
填充：10px；
边缘顶部：50px；
高度：10px；
宽度：120px；
背景：白色；
盒影：0px 0px 5px#000000；
z指数：0；
位置：绝对位置；
}
img{
身高：100%；
}

R
编辑：-

使用jquery可以动态计算span的css

Html已修改，在锚定标记下方添加了一个
，并在跨度上添加了阴影


*{
填充：0；
保证金：0；
}
div{
高度：50px；
宽度：100%；
背景：白色；
盒影：0px 0px 5px#000000；
}
a{
显示：内联块；
左边距：30px；
填充：10px；
高度：60px；
背景：白色；
/*盒影：0px 0px 5px#000000*/
z指数：100；
位置：绝对位置；
}
.影子{
显示：内联块；
左边距：30px；
填充：10px；
边缘顶部：50px；
高度：10px；
宽度：120px；
背景：白色；
盒影：0px 0px 5px#000000；
z指数：0；
位置：绝对位置；
}
img{
身高：100%；
}

R
你能详细说明一下吗？@LokeshGupta，正如我刚才在问题中添加的：基本上，我只希望左侧和右侧的阴影从
a
元素的底部延伸到
div
的底部。同时在
元素的底部显示一个
元素。检查答案可能会有帮助。你能详细说明一下吗