相关疑难解决方法(0)

带有框阴影的CSS语音泡泡

创建一个使用CSS在左侧绘制三角形的DIV.尝试将统一的box-shadow应用于父元素和伪元素(请参阅图像)和代码.

这可能吗?或者我最好使用border-image吗?

(上:暗影之前,中间:CSS Box-Shadow,Bottom:Desired Result)

添加Box-Shadow之前的元素

添加了box-shadow的元素

期望的结果

.bubble{
    height: 200px;
    width:  275px;

    opacity: 0;

    margin-top: 41px;

    float: right;

    background-color: #F2F2F2;

    -webkit-border-radius: 5px;
    -webkit-box-shadow: 0px 0px 6px #B2B2B2;
}

.bubble::after {
        height: 0px;
        width:  0px;

        content: "\00a0";

        display: block;

        margin-left: -10px;
        margin-top:   28px;

        border-width: 10px 10px 10px 0;
        border-style: solid;
        border-color: transparent #F2F2F2 transparent transparent;

        -webkit-box-shadow: 0px 0px 6px #B2B2B2;
    }
Run Code Online (Sandbox Code Playgroud)

html css css3 dropshadow css-shapes

53
推荐指数
3
解决办法
5万
查看次数

标签 统计

css ×1

css-shapes ×1

css3 ×1

dropshadow ×1

html ×1