新建一個html文件,定名為test.html,用于講解若何用CSS實現DIV塊的暗影結果。
在test.html頁面中,建立一個div,并設置其class屬性為con,本家兒要用于下面臨其進行樣式界說。
在test.html頁面中利用css設置div的寬度為300px,高度為300px,代碼如下:
在test.html頁面中利用css設置div居中對齊,并設置其布景顏色為白色,代碼如下:
在test.html頁面中利用box-shadow設置div的暗影結果,每個參數的意思如下:
第一個參數是x軸暗影段長度;
第二個參數是y軸暗影段長度;
第三個參數是往周圍暗影段長度;
第四個參數是暗影段顏色。
為了兼容所有的瀏覽器,如IE瀏覽器、火狐瀏覽器等,需要利用下面的方式再設置div的暗影結果,代碼如下:
在瀏覽打開test.html頁面,查看實現暗影的結果。
0 篇文章
如果覺得我的文章對您有用,請隨意打賞。你的支持將鼓勵我繼續創作!