<div 右投影是HTML/CSS中一個常用的效果，它可以給元素添加一個投影，投影在元素的右邊界上產生一個虛像。這種效果常用于使元素在頁面上突出顯示，給用戶以立體的感覺。
下面我將通過幾個代碼案例來詳細說明<div 右投影的使用方法。
第一個案例是通過CSS的box-shadow屬性實現<div 右投影的效果。代碼如下：

\<pre>html
<p><div class="box" 右投影</div></p>
<p><style></p>
<p>.box {</p>
<p>  width: 200px;</p>
<p>  height: 200px;</p>
<p>  background-color: #f2f2f2;</p>
<p>  box-shadow: 10px 0 10px rgba(0,0,0,0.5);</p>
<p>}</p>
<p></style></p>
\

在這個案例中，我們創建了一個class名為box的<div>元素，設置了寬度和高度，并將其背景顏色設為#f2f2f2。接著通過box-shadow屬性給這個元素添加了一個右投影，其距離為10px，模糊度為10px，投影顏色為rgba(0,0,0,0.5)，表示黑色半透明。這樣，.box元素就擁有了一個右投影的效果。
第二個案例是使用偽元素:before來實現<div 右投影的效果。代碼如下：

\<pre>html
<p><div class="box" 右投影</div></p>
<p><style></p>
<p>.box {</p>
<p>  width: 200px;</p>
<p>  height: 200px;</p>
<p>  background-color: #f2f2f2;</p>
<p>  position: relative;</p>
<p>}</p>
<p>.box:before {</p>
<p>  content: "";</p>
<p>  position: absolute;</p>
<p>  right: -10px;</p>
<p>  top: 0;</p>
<p>  width: 10px;</p>
<p>  height: 100%;</p>
<p>  background-color: rgba(0,0,0,0.5);</p>
<p>}</p>
<p></style></p>
\

在這個案例中，我們同樣創建了一個class名為box的<div>元素，設置了寬度和高度，并將其背景顏色設為#f2f2f2。同時，我們給這個元素設置了相對定位(position: relative;)。然后，通過偽元素:before來創建一個投影元素。該偽元素的content屬性為空字符串，position屬性設為絕對定位(position: absolute;)，并通過right屬性將其定位在.box元素的右邊界。它的寬度設為10px，高度設為100%，背景顏色設為rgba(0,0,0,0.5)。這樣.box:before元素就成為了.box元素的右投影。
通過以上兩個案例，我們可以看到，使用CSS的box-shadow屬性或偽元素:before都可以實現<div 右投影的效果。這樣的效果可以使元素顯得更加突出，并增強頁面的立體感。大家可以根據實際需求選擇合適的方法來實現這一效果。