• <noscript id="ecgc0"><kbd id="ecgc0"></kbd></noscript>
    <menu id="ecgc0"></menu>
  • <tt id="ecgc0"></tt>

    如何用CSS實現DIV塊的陰影效果

    新建一個html文件,定名為test.html,用于講解若何用CSS實現DIV塊的暗影結果。

  • 2

    在test.html頁面中,建立一個div,并設置其class屬性為con,本家兒要用于下面臨其進行樣式界說。

  • 3

    在test.html頁面中利用css設置div的寬度為300px,高度為300px,代碼如下:

  • 4

    在test.html頁面中利用css設置div居中對齊,并設置其布景顏色為白色,代碼如下:

  • 5

    在test.html頁面中利用box-shadow設置div的暗影結果,每個參數的意思如下:

    第一個參數是x軸暗影段長度;
    第二個參數是y軸暗影段長度;
    第三個參數是往周圍暗影段長度;
    第四個參數是暗影段顏色。

  • 6

    為了兼容所有的瀏覽器,如IE瀏覽器、火狐瀏覽器等,需要利用下面的方式再設置div的暗影結果,代碼如下:

  • 7

    在瀏覽打開test.html頁面,查看實現暗影的結果。

    • 發表于 2019-09-17 23:12
    • 閱讀 ( 996 )
    • 分類:其他類型

    你可能感興趣的文章

    相關問題

    0 條評論

    請先 登錄 后評論
    聯系我們:uytrv@hotmail.com 問答工具
  • <noscript id="ecgc0"><kbd id="ecgc0"></kbd></noscript>
    <menu id="ecgc0"></menu>
  • <tt id="ecgc0"></tt>
    久久久久精品国产麻豆