css陰影邊框怎麼設定

css陰影邊框的設定方法：先新建一個html檔；然後在這個html檔上建立兩個【

】用來設定陰影邊框；最後這兩個div新增樣式類別為in 、out。

本教學操作環境：windows10系統、css3版，DELL G3電腦，此方法適用於所有品牌電腦。

css陰影邊框的設定方法：

1、開啟前端開發工具，新建一個html文件，然後在這個html檔案上建立兩個

用來設定陰影邊框，最後這兩個div添加樣式類別為: in、out。如圖：

程式碼：

<div class="out">外部边框阴影</div>
<div class="in">内部边框阴影</div>

登入後複製

2、設定邊框陰影。對這兩個的樣式類別設定大小，寬高，最後使用box-shadow設定陰影邊框。如圖：

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、所有程式碼。可以直接複製所有程式碼到新建的html檔案上，貼上儲存後使用瀏覽器開啟即可看到效果。

所有程式碼：

<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>



<div class="out">外部边框阴影</div>
<div class="in">内部边框阴影</div>

登入後複製

相關教學推薦：CSS影片教學

以上是css陰影邊框怎麼設定的詳細內容。更多資訊請關注PHP中文網其他相關文章！