成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

關(guān)于css3的陰影遮蓋問題的小研究

supernavy / 3682人閱讀

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

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

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


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

這種效果應(yīng)該怎么實現(xiàn)呢
剛開始我想到的是z-index,是不是改一下z-index的值就可以正常顯示了呢,我們試試,將第二個div的z-index設(shè)為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;
        }

結(jié)果這樣:

果然毫無效果,于是我嘗試使用在第二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;
        }

結(jié)果如下

雖然陰影顯示出來了,但是還是被第三個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如果不設(shè)置高好像就無法顯示,但是思路來了,是不是因為position的原因呢,于是我馬上把所有的div都設(shè)置成relative,并且把第二個設(shè)置為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;
        }

刷新,哈,好了
那是不是當(dāng)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;
        }

一樣可以

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/49856.html

相關(guān)文章

  • 關(guān)于css3的陰影遮蓋問題的小研究

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

    feng409 評論0 收藏0

  • the compatibility problem of ie

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

    DobbyKim 評論0 收藏0

  • the compatibility problem of ie

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

    GeekQiaQia 評論0 收藏0

  • 頁面動畫知識點整理

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

    booster 評論0 收藏0

  • 利用CSS改變圖片顏色的100種方法！

    摘要：前言說到對圖片進行處理，我們經(jīng)常會想到這類的圖像處理工具?；蛘呤堑臅r候，對圖片的對比度，陰影進行處理。過濾器通常被用于調(diào)整圖片，背景和邊界的渲染。最后，安利我們的公眾號前端指南。 前言 說到對圖片進行處理，我們經(jīng)常會想到PhotoShop這類的圖像處理工具。作為前端開發(fā)者，我們經(jīng)常會需要處理一些特效，例如根據(jù)不同的狀態(tài)，讓圖標(biāo)顯示不同的顏色?；蛘呤莌over的時候，對圖片的對比度，陰影...

    Keven 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<