不重疊的邊框 - 陰影

如何在下面的示例中創建不重疊的陰影框？不重疊的邊框 - 陰影

因爲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

不重疊的邊框 - 陰影

回答

相關問題