1

我正在处理 css3 3D 页面，我想通过透明 div 显示阴影，但我无法让它工作......
我不能使用跨度或任何东西，因为它需要是同一个对象，因为jquery 动画。

基本的 div 样式：

#Div3{
        position:absolute;
        border:1px solid white;
        border-radius:10px;        
        transition: all 1s;
        background:transparent;
        pointer-events: none;
    }

位置+阴影+变换的附加类：

.P3{
        top:22.5%;
        bottom:25%;
        right:25%;
        height:55%;
        width:20%;
        margin-right:-10%;
        box-shadow:10px 0px 15px rgba(255,255,255,0.6);
        transform: perspective( 1000px ) rotateY( 330deg );
        -webkit-transform: perspective( 1000px ) rotateY( 330deg );
    }

结果：
 背景设置为透明，但不会显示其背后的盒子阴影，

  • box-shadow 是否只为对象的轮廓生成阴影？
  • 有没有办法使用css让它可见？
4

2 回答 2

2

他希望阴影（黑暗部分）也显示在轮廓的内侧。也就是说，在轮廓的两侧都有阴影。

也许这会有所帮助：

filter: drop-shadow(0px 3px 3px rgba(0,0,0,1));
于 2019-11-29T11:46:56.827 回答
-1

我不完全知道为什么不适合你。正如您在示例中看到的那样，框阴影确实显示在透明背景上。

也许您应该尝试将阴影放在元素的第一个类定义上，#Div3。

.cartContainer{
width:150px;
height:60px;
border-radius:10px;
background:transparent;
float:left;
margin:-10px 0 0 15px;
box-shadow:inset 0 0 5px  #FFFF99, #333 0 0 5px;

}

示例：工作小提琴

于 2014-03-18T14:53:57.460 回答