關于css3的陰影遮蓋問題的小研究

feng409 發布于2019-08-30 13:06 / 2368人閱讀

摘要：今日在寫一個陰影效果的時候遇到了一個小問題不多說上代碼可以看到下方的陰影總被遮擋但如果我想要這種效果應該怎么實現呢剛開始我想到的是是不是改一下的值就可以正常顯示了呢我們試試將第二個的設為結果這樣果然毫無效果于是我嘗試使用在第二

今日在寫一個陰影效果的時候遇到了一個小問題,不多說,上代碼

div {
            width: 100px;
            height: 100px;
            background: #e3e3e3;
            border: 1px solid #333;
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
        }

可以看到,下方的陰影總被遮擋,但如果我想要

這種效果應該怎么實現呢
剛開始我想到的是z-index,是不是改一下z-index的值就可以正常顯示了呢,我們試試,將第二個div的z-index設為999

div {
            width: 100px;
            height: 100px;
            background: #e3e3e3;
            border: 1px solid #333;
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
        }
div:nth-child(2) {
            z-index:999;
        }

結果這樣:

果然毫無效果,于是我嘗試使用在第二div后面加一個::after,給他加一個陰影,并且把原陰影去除,以便觀察

div {
            width: 100px;
            height: 100px;
            background: #e3e3e3;
            border: 1px solid #333;
        }
div:nth-child(2)::after {
            display: block;
            content: "";
            width:100px;
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
            height: 20px;
        }

結果如下

雖然陰影顯示出來了,但是還是被第三個div遮蓋,那如果把它絕對定位,抽離文本流試試呢

 div {
            width: 100px;
            height: 100px;
            background: #e3e3e3;
            border: 1px solid #333;
        }
div:nth-child(2)::after {
            position: absolute;
            display: block;
            content: "";
            width:100px;
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
            height: 10px;
        }

確實有效果了,但是::after如果不設置高好像就無法顯示,但是思路來了,是不是因為position的原因呢,于是我馬上把所有的div都設置成relative,并且把第二個設置為z-index:999,看效果

 div {
            position: relative;
            width: 100px;
            height: 100px;
            background: #e3e3e3;
            border: 1px solid #333;
        }

div:nth-child(2) {
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
            z-index: 999;
        }

刷新,哈,好了
那是不是當position為absolute的時候也一樣有效呢,試試

 div {
            position: absolute;
            width: 100px;
            height: 100px;
            background: #e3e3e3;
            border: 1px solid #333;
        }

div:nth-child(2) {
            top: 200px;
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
            z-index: 999;
        }

div:nth-child(3) {
            top: 300px;
        }

一樣可以

所以陰影的遮蓋順序是當元素的 position 為 relative 或者 absolute 時, z-index 大的遮蓋 z-index 小的

第一次寫文章,不專業的地方,輕噴~輕噴~~

GPU云服務器云服務器關于云計算的小故事關于網絡安全的小知識有關于c語言的小程序關于javascript的問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115312.html

關于css3的陰影遮蓋問題的小研究

摘要：今日在寫一個陰影效果的時候遇到了一個小問題不多說上代碼可以看到下方的陰影總被遮擋但如果我想要這種效果應該怎么實現呢剛開始我想到的是是不是改一下的值就可以正常顯示了呢我們試試將第二個的設為結果這樣果然毫無效果于是我嘗試使用在第二今日在寫一個陰影效果的時候遇到了一個小問題,不多說,上代碼 div { width: 100px; height...

supernavy 2019-08-01 15:21 評論0 收藏0
the compatibility problem of ie

摘要：下的兼容問題處理背景透明，圓角，和支持部分選擇器例如支持的語義化標簽，媒體查詢等。在頁面頭部優先加載需要的插件，因為部分插件需要依賴所以需要最先加載。注意順序，插件優先添加。這個路徑是相對的路徑。 ie8hack ie8下的兼容問題處理：背景透明，css3圓角，css3和jquery支持部分css3選擇器（例如：nth-child）,支持html5的語義化標簽，媒體查詢@media等。...

DobbyKim 2019-08-30 13:00 評論0 收藏0
the compatibility problem of ie

摘要：下的兼容問題處理背景透明，圓角，和支持部分選擇器例如支持的語義化標簽，媒體查詢等。在頁面頭部優先加載需要的插件，因為部分插件需要依賴所以需要最先加載。注意順序，插件優先添加。這個路徑是相對的路徑。 ie8hack ie8下的兼容問題處理：背景透明，css3圓角，css3和jquery支持部分css3選擇器（例如：nth-child）,支持html5的語義化標簽，媒體查詢@media等。...

GeekQiaQia 2019-08-01 15:12 評論0 收藏0
頁面動畫知識點整理

摘要：然后在節點上設置了動畫屬性，并將其設為前面定義的動畫，每一次動畫秒，表示無限循環，表示緩動方式，兩個關鍵幀之間的變化是方式逐步變化的。平時工作中會遇到需要實現一些存在動畫的頁面。這里對動畫的實現知識做一個整理。頁面動畫的實現可以分為兩類：CSS動畫、Canvas動畫、JavaScript動畫。JavaScript動畫沒啥好講的，這里就不整理了。 CSS動畫 CSS3中提供了一個屬性t...

booster 2019-08-19 18:30 評論0 收藏0
利用CSS改變圖片顏色的100種方法！

摘要：前言說到對圖片進行處理，我們經常會想到這類的圖像處理工具。或者是的時候，對圖片的對比度，陰影進行處理。過濾器通常被用于調整圖片，背景和邊界的渲染。最后，安利我們的公眾號前端指南。前言說到對圖片進行處理，我們經常會想到PhotoShop這類的圖像處理工具。作為前端開發者，我們經常會需要處理一些特效，例如根據不同的狀態，讓圖標顯示不同的顏色。或者是hover的時候，對圖片的對比度，陰影...

Keven 2019-08-02 16:06 評論0 收藏0