成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

supernavy / 3563人閱讀

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

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

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


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

這種效果應(yīng)該怎么實(shí)現(xiàn)呢
剛開始我想到的是z-index,是不是改一下z-index的值就可以正常顯示了呢,我們試試,將第二個(gè)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后面加一個(gè)::after,給他加一個(gè)陰影,并且把原陰影去除,以便觀察

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é)果如下

雖然陰影顯示出來了,但是還是被第三個(gè)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;
        }

確實(shí)有效果了,但是::after如果不設(shè)置高好像就無法顯示,但是思路來了,是不是因?yàn)閜osition的原因呢,于是我馬上把所有的div都設(shè)置成relative,并且把第二個(gè)設(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的時(shí)候也一樣有效呢,試試

 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 時(shí), z-index 大的遮蓋 z-index 小的

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

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

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

相關(guān)文章

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

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

    feng409 評論0 收藏0

  • the compatibility problem of ie

    摘要：下的兼容問題處理背景透明，圓角，和支持部分選擇器例如支持的語義化標(biāo)簽，媒體查詢等。在頁面頭部優(yōu)先加載需要的插件，因?yàn)椴糠植寮枰蕾囁孕枰钕燃虞d。注意順序，插件優(yōu)先添加。這個(gè)路徑是相對的路徑。 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àn)椴糠植寮枰蕾囁孕枰钕燃虞d。注意順序，插件優(yōu)先添加。這個(gè)路徑是相對的路徑。 ie8hack ie8下的兼容問題處理：背景透明，css3圓角，css3和jquery支持部分css3選擇器（例如：nth-child）,支持html5的語義化標(biāo)簽，媒體查詢@media等。...

    GeekQiaQia 評論0 收藏0

  • 頁面動畫知識點(diǎn)整理

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

    booster 評論0 收藏0

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

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

    Keven 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<