不重叠的边框 - 阴影

如何在下面的示例中创建不重叠的阴影框？不重叠的边框 - 阴影

因为SO希望我提供更多详细信息：您的目标是为元素.top和.side创建箱形阴影，而不会更改不重叠的标记（如果可能）。

编辑：两个阴影框必须有模糊半径> 0。

编辑2：“非重叠”意味着在这种情况下，两个阴影都不会落入其他元素中。

编辑3：查看真棒图片作进一步解释。

代码：

.wrapper-all { 
 
    padding-left: 50px; 
 
} 
 
.wrapper-side { 
 
    margin-left: -50px; 
 
    left: 50px; 
 
} 
 
.top { 
 
    position: relative; 
 
    background-color: #fff; 
 
    height: 20px; 
 
    -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 1); 
 
    -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 1); 
 
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 1); 
 
} 
 
h2, 
 
p { 
 
    text-indent: 15px; 
 
} 
 
.side { 
 
    position: fixed; 
 
    width: 50px; 
 
    height: 100%; 
 
    background-color: #fff; 
 
    -webkit-box-shadow: 5px 0px 5px 0px rgba(0, 0, 0, 1); 
 
    -moz-box-shadow: 5px 0px 5px 0px rgba(0, 0, 0, 1); 
 
    box-shadow: 5px 0px 5px 0px rgba(0, 0, 0, 1); 
 
}

<div class="wrapper-all"> 
 
    <div class="wrapper-side"> 
 
    <div class="side"></div> 
 
    </div> 
 
    <div class="wrapper-top"> 
 
    <div class="top"> 
 
     <p>My shadow is overlapping on the left. Not cool.</p> 
 
    </div> 
 
    </div> 
 
    <h2>Have a nice day! :)</h2> 
 
</div>

来源

2016-12-14 Jekyll

这两者的元件？有许多。 – Kyle

元素现在被命名。谢谢 – Jekyll

'.side {z-index：10}'？ –

您只需要展开一个阴影并使其变得模糊阴影本身的一部分，所以模糊不会从块的另一侧看到。为此，您需要定义传播半径（阴影的第四个参数），其中正值会增加阴影的大小，负值会减小大小。缺省值是0（阴影是相同的大小模糊）：

.wrapper-all { 
 
    padding-left:50px; 
 
} 
 
.wrapper-side { 
 
    margin-left: -50px; 
 
    left: 50px; 
 
} 
 

 
.top { 
 
    position: relative; 
 
    background-color: #fff; 
 
    height: 20px; 
 
    -webkit-box-shadow: 2px 7px 5px -2px rgba(0,0,0,1); 
 
    -moz-box-shadow: 2px 7px 5px -2px rgba(0,0,0,1); 
 
    box-shadow: 2px 7px 5px -2px rgba(0,0,0,1); 
 
} 
 
h2, p { 
 
    text-indent: 15px; 
 
} 
 
.side { 
 
    position: fixed; 
 
    width: 50px; 
 
    height: 100%; 
 
    background-color: #fff; 
 
    -webkit-box-shadow: 7px 2px 5px -2px rgba(0,0,0,1); 
 
    -moz-box-shadow: 7px 2px 5px -2px rgba(0,0,0,1); 
 
    box-shadow: 7px 2px 5px -2px rgba(0,0,0,1); 
 
}

<div class="wrapper-all"> 
 
    <div class="wrapper-side"> 
 
    <div class="side"> 
 
    </div> 
 
    </div> 
 
    <div class="wrapper-top"> 
 
    <div class="top"> 
 
    <p> 
 
    My shadow is overlapping on the left. Not cool. 
 
    </p> 
 
    </div> 
 
    </div> 
 
    <h2> 
 
    Have a nice day! :) 
 
    </h2> 
 
</div>

来源

2016-12-14 12:55:29 Banzay

如果我没有理解这个权利，我认为这是你想要的吗？只需卸下位置：顶格的相对..

.wrapper-all { 
 
    padding-left:50px; 
 
} 
 
.wrapper-side { 
 
    margin-left: -50px; 
 
    left: 50px; 
 
} 
 

 
.top { 
 

 
    background-color: #fff; 
 
    height: 20px; 
 
    -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,1); 
 
    -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,1); 
 
    box-shadow: 0px 5px 5px 0px rgba(0,0,0,1); 
 
} 
 
h2, p { 
 
    text-indent: 15px; 
 
} 
 
.side { 
 
    position: fixed; 
 
    width: 50px; 
 
    height: 100%; 
 
    background-color: #fff; 
 
    -webkit-box-shadow: 5px 0px 5px 0px rgba(0,0,0,1); 
 
    -moz-box-shadow: 5px 0px 5px 0px rgba(0,0,0,1); 
 
    box-shadow: 5px 0px 5px 0px rgba(0,0,0,1); 
 
}

<div class="wrapper-all"> 
 
    <div class="wrapper-side"> 
 
    <div class="side"> 
 
    </div> 
 
    </div> 
 
    <div class="wrapper-top"> 
 
    <div class="top"> 
 
    <p> 
 
    My shadow is overlapping on the left. Not cool. 
 
    </p> 
 
    </div>

来源

2016-12-14 12:22:16

谢谢，但问题说明blur-radius> 0。随着模糊，它仍然重叠:( – Jekyll

前2个值是不是模糊是偏移 –

@Jekyll http://www.w3schools.com/cssref/css3_pr_box-shadow.asp –

-1

我也是在这个麻烦，我这个丑陋的黑客攻击解决它：

.top { 
    box-shadow: 2px 5px 5px 0px rgba(0,0,0,1); 
} 
.top:after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: -5px; 
    width: 5px; 
    height: 100%; 
    background: #fff; /*same as side bg*/ 
}

编辑： https://jsfiddle.net/kantoci/25k5z7eq/5/

来源

2016-12-14 12:26:58 Kantoci

不重叠的边框 - 阴影

回答

相关问题