站長資訊網(wǎng)css陰影邊框的設(shè)置方法：首先新建一個html文件；然后在這個html文件上創(chuàng)建兩個【<div>】用來設(shè)置陰影邊框；最后這兩個div添加樣式類為in、out。
本教程操作環(huán)境：windows10系統(tǒng)、css3版，DELL G3電腦，該方法適用于所有品牌電腦。
css陰影邊框的設(shè)置方法：
1、打開前端開發(fā)工具，新建一個html文件，然后在這個html文件上創(chuàng)建兩個<div>用來設(shè)置陰影邊框，最后這兩個div添加樣式類為: in、out。如圖：
代碼：
<div class="out">外部邊框陰影</div> <div class="in">內(nèi)部邊框陰影</div>
2、設(shè)置邊框陰影。對這兩個的樣式類設(shè)置大小，寬高，最后使用box-shadow設(shè)置陰影邊框。如圖：
css代碼：
<style type="text/css"> .out,.in{ width:300px; height: 150px; border:1px solid #BFBFBF; margin: 20px auto; } .out{ box-shadow:0px 0px 10px 5px #aaa; } .in{ box-shadow:0px 0px 10px 5px #aaa inset; } </style>
3、保存html文件后使用瀏覽器打開即可看到效果。如圖：
4、所有代碼。可以直接復(fù)制所有代碼到新建的html文件上，粘貼保存后使用瀏覽器打開即可看到效果。
所有代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .out,.in{ width:300px; height: 150px; border:1px solid #BFBFBF; margin: 20px auto; } .out{ box-shadow:0px 0px 10px 5px #aaa; } .in{ box-shadow:0px 0px 10px 5px #aaa inset; } </style> </head> <body> <div class="out">外部邊框陰影</div> <div class="in">內(nèi)部邊框陰影</div> </body> </html>
相關(guān)教程推薦：CSS視頻教程
