<div>凸出效果，也稱為浮雕效果或者3D效果，是一種在網頁設計中常見的樣式。它使元素在頁面上呈現出立體感，給用戶一種物體突出于頁面的錯覺。這種效果常用于按鈕、卡片等元素，可以增加用戶對頁面上重要元素的注意力。在本文中，我們將詳細介紹使用CSS實現凸出效果的幾個代碼案例，讓你可以輕松應用到自己的網頁設計中。</div>

，我們來看一個簡單的凸出效果示例。

<div class="box">Hello, World!</div>

對應的CSS代碼如下：

.box {
background-color: #f9f9f9;
border: 1px solid #ccc;
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

在這個例子中，我們給一個盒子元素添加了一個陰影效果。box-shadow屬性接受四個值，分別是水平偏移、垂直偏移、模糊半徑和陰影顏色。通過調整這些值，我們可以控制陰影的形狀和大小。

接下來，我們將介紹一個更復雜的凸出效果示例。

<div class="card">
<img src="image.jpg" alt="Image">
<div class="overlay">
<h3>Title</h3>
<p>Description</p>
<a href="#">Read More</a>
</div>
</div>

對應的CSS代碼如下：

.card {
position: relative;
width: 300px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 10px;
overflow: hidden;
}
<br>
.card img {
width: 100%;
height: auto;
}
<br>
.card .overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
text-align: center;
transform: translateY(100%);
transition: transform 0.3s ease;
}
<br>
.card:hover .overlay {
transform: translateY(0);
}

在這個例子中，我們創建了一個卡片元素，其中包含一張圖片和一個覆蓋層。通過設置position屬性為relative，我們確保覆蓋層相對于卡片元素進行定位。我們還設置了transform屬性為translateY(100%)，使覆蓋層向下偏移100%的高度。然后，通過:hover偽類，我們將覆蓋層向上偏移回到原始位置，從而實現了凸出效果。

通過以上的兩個例子，我們可以看到使用CSS可以輕松實現凸出效果。你可以通過調整背景色、邊框、陰影、位置等屬性來自定義凸出效果的樣式。在實際應用中，你可以將這種效果應用于網頁中的按鈕、卡片、導航欄等元素，以提高用戶體驗和頁面視覺效果。

希望本文對你理解和應用凸出效果有所幫助！