CSS盒子四周都要用陰影

CSS是用于創建網頁和移動應用程序的樣式表語言。其中，陰影是一種常見的樣式屬性，可以用于創建漸變效果和陰影，從而使網頁和應用程序更具吸引力和可讀性。

在CSS中，陰影可以使用兩種主要的方式創建：盒模型陰影和偽元素陰影。

1. 盒模型陰影

盒模型陰影是指使用盒模型屬性`border-radius`和`box-shadow`來創建的樣式。其中，`border-radius`可以設置邊框半徑，`box-shadow`可以設置陰影樣式。

例如，以下是一個簡單的使用`border-radius`和`box-shadow`創建陰影的示例：

.box {

width: 200px;

height: 200px;

background-color: blue;

border-radius: 50%;

box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);

在這個示例中，`.box`元素的背景顏色是藍色，并且其邊框半徑被設置為50%，因此邊框將呈現出陰影效果。陰影的寬度和強度可以通過`box-shadow`屬性中的值來控制。

2. 偽元素陰影

偽元素陰影是指使用偽元素(如`<div>`和`<p>`)來創建的樣式。在這種情況下，陰影是由外部元素(如文本或圖像)在偽元素周圍產生的。

例如，以下是一個使用偽元素陰影的示例：

<div class="陰影-container">

<p>這是一個陰影效果</p>

</div>

.陰影-container {

width: 200px;

height: 200px;

display: inline-block;

.陰影-container p {

font-size: 16px;

line-height: 1.5;

color: white;

background-color: blue;

box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);

在這個示例中，`.陰影-container`元素是一個`<div>`元素，并且其寬度和高度均為200像素。`<p>`元素在`<div>`元素周圍產生陰影。

無論使用哪種方法，陰影都可以增強網頁和應用程序的視覺效果，從而使它們更具吸引力和可讀性。但是，陰影的使用也需要謹慎，以確保不會對用戶的瀏覽造成負面影響。