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

資訊專欄INFORMATION COLUMN

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

feng409 / 2401人閱讀

摘要：今日在寫一個(gè)陰影效果的時(shí)候遇到了一個(gè)小問題不多說上代碼可以看到下方的陰影總被遮擋但如果我想要這種效果應(yīng)該怎么實(shí)現(xiàn)呢剛開始我想到的是是不是改一下的值就可以正常顯示了呢我們?cè)囋噷⒌诙€(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的值就可以正常顯示了呢,我們?cè)囋?將第二個(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遮蓋,那如果把它絕對(duì)定位,抽離文本流試試呢

 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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

相關(guān)文章

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

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

    supernavy 評(píng)論0 收藏0

  • the compatibility problem of ie

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

    DobbyKim 評(píng)論0 收藏0

  • the compatibility problem of ie

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

    GeekQiaQia 評(píng)論0 收藏0

  • 頁(yè)面動(dòng)畫知識(shí)點(diǎn)整理

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

    booster 評(píng)論0 收藏0

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

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

    Keven 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

feng409

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<