Html 如何在下面的形状周围添加框阴影

大家好，我正在尝试在使用css创建的自定义形状周围添加一个框阴影 如下图所示

正文{
填充：50px
}
div{
高度：45px；
宽度：209px；
浮动：左；
颜色：#fff；
线高：45px；
文本对齐：居中；
位置：相对位置；
字体系列：Arial；
字体大小：粗体；
字体大小：16px；
背景色：#50b3cf；
}
div：：之后{
位置：绝对位置；
z指数：2；
内容：“；
宽度：0；
身高：0；
边框顶部：22.5px实心透明；
边框底部：22.5px实心透明；
右：1px；
转化：translateX（100%）；
左边框：22.5px实心#50b3cf；
}

---

您想要使用

框阴影：10px 10px 5px#8888888用于此。每个像素表示哪一侧，#表示颜色


正文{
填充：50px
}
div{
高度：45px；
宽度：209px；
浮动：左；
颜色：#fff；
线高：45px；
文本对齐：居中；
位置：相对位置；
字体系列：Arial；
字体大小：粗体；
字体大小：16px；
背景色：#50b3cf；
盒影：0px 10px 5px#8888888；
}
div：：之后{
位置：绝对位置；
z指数：2；
内容：“；
宽度：0；
身高：0；
边框顶部：22.5px实心透明；
边框底部：22.5px实心透明；
右：1px；
转化：translateX（100%）；
左边框：22.5px实心#50b3cf；
}

声明伪元素
宽度
和
高度
性质
清理边界
然后旋转有问题的伪元素
现在根据需要应用
box shadow

拿一个好的冷的

正文{
填充：50px
}
div{
高度：45px；
宽度：209px；
浮动：左；
颜色：#fff；
线高：45px；
文本对齐：居中；
位置：相对位置；
字体系列：Arial；
字体大小：粗体；
字体大小：16px；
背景色：#50b3cf；
盒影：0px 0px 5px 3px#000000；
}
div：：之后{
位置：绝对位置；
z指数：2；
内容：“；
左：100%；
宽度：32px；
高度：32px；
背景：#50b3cf；
变换：旋转（46度）；
变换原点：0；
盒影：3px-3px 5px 0px#000000；
}
div:：在{/*2.0版补丁之前*/
内容：“；
位置：绝对位置；
背景：#50b3cf；
排名：0；
底部：0；
宽度：25px；
右：0；
z指数：9；
}

.box{
边框：1px纯白；
宽度：400px；
高度：150像素；
左边距：40px；
盒影：0.09像素3像素rgba（0,0,0,0.5）；
}
.阿罗{
宽度：100px；
高度：100px；
位置：相对位置；
顶部：20px；
左：-100px；
溢出：隐藏；
盒影：0 10px 10px-17px rgba（0,0,0,0.5）；
变换：旋转（270度）；
}
.阿罗：之后{
内容：“；
位置：绝对位置；
宽度：50px；
高度：50px；
背景：白色；
变换：旋转（45度）；
顶部：76px；
左：25px；
盒影：-2px-2px 9px 0px rgba（0,0,0.5）；
}
也许这就是你想要做的。


第一个有盒子阴影，第二个没有盒子阴影，但是你可以使用下面的代码添加它
box shadow:0px 0px 6px 0px#000在类“arrow-r”中



.主接线盒{
位置：相对位置；
填充：0 35px 90px；
}
.盒子{
字体大小：20px；
位置：相对位置；
显示：内联块；
明确：两者皆有；
边缘底部：8px；
填充：13px 14px；
垂直对齐：顶部；
边界半径：5px；
}
.阿罗-l{
浮动：左；
颜色：#fff；
背景色：#08abf4；盒影：0px 0px 6px 0px#000；
}
.arrow-r{
浮动：对；
颜色：#1A1A；
背景色：#E2；
}
.盒子：以前{
位置：绝对位置；
顶部：24px；
宽度：8px；
高度：6px；
内容：'\00a0'；
-webkit变换：旋转（30度）倾斜（-36度）；
变换：旋转（30度）倾斜（-36度）；
}
左：前{
左：-4px；
背景色：#08abf4；
}
.盒子：以前{
位置：绝对位置；
顶部：21px；
宽度：8px；
高度：6px；
内容：'\00a0'；
-webkit变换：旋转（30度）倾斜（-36度）；
变换：旋转（30度）倾斜（-36度）；
}
右：在…之前{
右：-4px；
背景色：#E2；
}
我是利亚姆·拉巴迪
你呢？
这是一个很好的技巧：）@sjahan One要把所有其他的东西都放进袋子里时@UncaughtTypeError当我运行上述代码时，我看不到盒子shadow@codegeek您的意思是，您在我的答案中嵌入的代码片段中看不到它，还是在您尝试将我的答案中的样式应用于生产代码时看不到它？仔细查看，比较版本，确保没有遗漏任何内容。对伪元素进行了重大更改，唯一添加到
div
选择器的是为“完全效果”添加的
box shadow
规则。除此之外，我不能说-我只能解释我被赋予的工作。嗨@UncaughtTypeError我在代码段中看不到它。你可以看到这里的阴影没有遵循自定义形状。我想OP已经知道盒影了。
<style type="text/css">
    .main-box{
      position: relative;
      padding: 0 35px 90px;
}
.box{
  font-size: 20px;
    position: relative;
    display: inline-block;
    clear: both;
    margin-bottom: 8px;
    padding: 13px 14px;
    vertical-align: top;
    border-radius: 5px;
}
.arrow-l {

  float: left;
  color: #fff;
  background-color: #08abf4;    box-shadow: 0px 0px 6px 0px #000;

}
.arrow-r {

  float: right;
  color: #1a1a1a;
  background-color: #e2e2e2;

}
.box:before{
      position: absolute;
    top: 24px;
    width: 8px;
    height: 6px;
    content: '\00a0';
    -webkit-transform: rotate(30deg) skew(-36deg);
    transform: rotate(30deg) skew(-36deg);
}
.box.left:before {
  left: -4px;
  background-color: #08abf4;

}

.box:before{
      position: absolute;
    top: 21px;
    width: 8px;
    height: 6px;
    content: '\00a0';
    -webkit-transform: rotate(30deg) skew(-36deg);
    transform: rotate(30deg) skew(-36deg);
}
.box.right:before {
  right: -4px;
  background-color: #e2e2e2;
}

</style>

<div class="main-box">
  <div class="box arrow-l left">
                    I'm Liam Lababidi
                </div>
    <div class="box arrow-r right">
                    What about u?
                </div>
</div>