網站首頁 健康小知識 母嬰教育 起名 運動知識 職場理財 情感生活 綠色生活 遊戲數碼 美容 特色美食 愛好

css設置邊框陰影;box-shadow的使用

欄目: 互聯網 / 發佈於: / 人氣:1.12W

如何使用box-shadow設置邊框陰影。
box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式]。投影方式有兩種:inset、outset,默認投影方式outset。
將通過案例來講述如何設置邊框陰影。

css設置邊框陰影;box-shadow的使用

操作方法

(01)打開前端開發工具,新建一個html文件,然後在這個html文件上創建兩個<div>用來設置陰影邊框,最後這兩個div添加樣式類為: in、out。如圖:代碼:<div class="out">外部邊框陰影</div><div class="in">內部邊框陰影</div>

css設置邊框陰影;box-shadow的使用 第2張

(02)設置邊框陰影。對這兩個的樣式類設置大小,寬高,最後使用box-shadow設置陰影邊框。如圖:css代碼:<style type="text/css">,{width:300px;height: 150px;border:1px solid #BFBFBF;margin: 20px auto;}{box-shadow:0px 0px  10px 5px #aaa;}{box-shadow:0px 0px 10px 5px #aaa inset;}</style>

css設置邊框陰影;box-shadow的使用 第3張

(03)保存html文件後使用瀏覽器打開即可看到效果。如圖:

css設置邊框陰影;box-shadow的使用 第4張

(04)所有代碼。可以直接複製所有代碼到新建的html文件上,粘貼保存後使用瀏覽器打開即可看到效果。所有代碼:<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">,{width:300px;height: 150px;border:1px solid #BFBFBF;margin: 20px auto;}{box-shadow:0px 0px  10px 5px #aaa;}{box-shadow:0px 0px 10px 5px #aaa inset;}</style></head><body><div class="out">外部邊框陰影</div><div class="in">內部邊框陰影</div></body></html>