在Web設計中，除了顏色、字體、背景等元素，在邊框樣式上也要著手考慮，以便達到更加美觀的效果。而CSS的Box Shadow屬性正是為此而生，它可以為任何HTML元素添加內陰影、外陰影或者二者同時添加。
而今天我們要介紹的是Box Shadow屬性的內陰影效果，也就是在元素的內部添加一個陰影。我們可以使用CSS中的div來完成這個效果.
<style>
div {
margin: 50px auto;
width: 200px;
height: 200px;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: inset 0 0 10px #999;
}
</style>
<body>
<div></div>
</body>在上面的代碼中，我們首先定義了一個div元素，然后通過設置width、height、margin、background-color、border等屬性來設置div樣式。接下來，通過box-shadow屬性，并將inset設為了box-shadow屬性的第一個參數，來制定實現內陰影效果。其余參數的含義如下：
- 第二個參數：表示X軸位置的偏移?？烧韶?。
- 第三個參數：表示Y軸位置的偏移。可正可負。
- 第四個參數：表示陰影的模糊半徑。
- 第五個參數：表示陰影的顏色。
最后，我們在網頁上展示出的結果就是一個帶有內陰影的div元素。
總的來說，Box Shadow屬性是一個幫助我們實現更美觀效果的好工具，可以為靜態HTML頁面注入更多的活力。熟練掌握此屬性可以極大地提高我們的工作效率，進而讓作品更加出色。
上一篇css div設置為滾動
下一篇css div邊框大小