妙知谷css設置邊框陰影;box-shadow的使用
- 互聯網
- 關注：1.06W次
如何使用box-shadow設置邊框陰影。
box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式]。投影方式有兩種：inset、outset，默認投影方式outset。
將通過案例來講述如何設置邊框陰影。
操作方法
（01）打開前端開發工具，新建一個html文件，然後在這個html文件上創建兩個<div>用來設置陰影邊框，最後這兩個div添加樣式類為: in、out。如圖：代碼：<div class="out">外部邊框陰影</div><div class="in">內部邊框陰影</div>
（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>
（03）保存html文件後使用瀏覽器打開即可看到效果。如圖：
（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>
- 文章版權屬於文章作者所有，轉載請註明 https://miaozhigu.com/sm/hulianwang/6m9kxy.html
