• <em id="52tge"><object id="52tge"><blockquote id="52tge"></blockquote></object></em>

  • <progress id="52tge"></progress>
      
      
      <tbody id="52tge"><pre id="52tge"></pre></tbody>
      <em id="52tge"></em>
      <li id="52tge"><acronym id="52tge"><u id="52tge"></u></acronym></li>

      <nav id="52tge"><sub id="52tge"><noframes id="52tge"></noframes></sub></nav>

      網站地圖 | RSS訂閱 老鐵博客 - 上海SEO優化|上海網站建設|蜘蛛池出租|站群代搭建
      你的位置:首頁 ? 前端腳本 ? 正文

      boxshadow,boxshadow四個值的意思

      2020-3-17 14:27:59 | 作者:老鐵SEO | 0個評論 | 人瀏覽

        box-shadow:insetx-offsety-offsetblur-radiusspread-radiuscolor


        (投影方式)(X軸偏移量)(Y軸偏移量)(陰影模糊半徑)(陰影擴展半徑)(陰影顏色)


        box-shadow:6px6px6px#292929;對應的值


        inset———默認的情況下是外陰影,如果取其唯一值“inset”,就是將外陰影變成內陰影,也就是說設置陰影類型為“inset”時,其投影就是內陰影


        boxshadow四個值的意思


        ox-shadow:h-shadowv-shadowblurspreadcolorinset;


        注釋:box-shadow向框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表,每個陰影由2-4個長度值、可選的顏色值以及可選的inset關鍵詞來規定。省略長度的值是0。


        h-shadow必需。水平陰影的位置。允許負值。


        v-shadow必需。垂直陰影的位置。允許負值。


        blur可選。模糊距離。


        spread可選。陰影的尺寸。


        color可選。陰影的顏色。請參閱CSS顏色值。


        inset可選。將外部陰影(outset)改為內部陰影。


        CSS代碼


        body{background:#f00;}


        html{background:#f00;}/*html加背景色*/


        .g1{


        width:500px;


        height:500px;


        border:2pxsolid#fff;


        margin:30pxauto;


        background-color:#fff;


        box-sizing:border-box;


        }


        .g2{


        width:400px;


        height:400px;


        margin:50pxauto;


        border:2pxsolid#000;


        box-shadow:5px5px5px#000,5px-5px5px#000,-5px5px5px#000,-5px-5px5px#000;


        }


        boxshadow內部陰影


        如果頁面中存在絕對定位(position:absolute)或固定定位(position:fixed)的元素時,這些元素與主文檔流并不在同一平面(你可以把它們想象成漂浮在空中的),這樣的話地面物體的陰影肯定不能遮擋空中物體啦!你可以把含box-shadow屬性的元素也弄成絕對定位或固定定位的,并且把z-index屬性弄得比其他漂浮元素都大,這樣它的陰影就能遮蓋所有其他元素了。一句話概括,就是要把它弄成最高的那一層!


        補充一點:即使是在同一平面(所有元素都在地面,沒有漂浮在空中的元素),那么如果含有box-shadow屬性的元素后面還有其他元素,那么它的陰影也是沒法遮蓋后面的元素的。

    1. 本文來自: 老鐵博客,轉載請保留出處!歡迎發表您的評論
    2. 相關標簽:
    3. 已有0位網友發表了一針見血的評論,你還等什么?

      必填

      選填

      記住我,下次回復時不用重新輸入個人信息

      必填,不填不讓過哦,嘻嘻。

      ◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

      相關推薦

      色情激情片日本大全|亚洲无码色情gif|六人行成人版第九影院|亚洲成人电影理论电影

    4. <em id="52tge"><object id="52tge"><blockquote id="52tge"></blockquote></object></em>

    5. <progress id="52tge"></progress>
        
        
        <tbody id="52tge"><pre id="52tge"></pre></tbody>
        <em id="52tge"></em>
        <li id="52tge"><acronym id="52tge"><u id="52tge"></u></acronym></li>

        <nav id="52tge"><sub id="52tge"><noframes id="52tge"></noframes></sub></nav>