div 圓角未顯示是指在使用CSS設置div元素的圓角屬性時，圓角效果未能正確顯示。一般來說，當我們使用border-radius屬性來設置div元素的圓角時，應該可以看到元素的邊角被圓潤地呈現出來。但有時我們發現設置的圓角效果并沒有生效，元素仍然保持著默認的直角狀態，這是因為某些原因導致了圓角屬性未能正確應用。下面將通過幾個代碼案例來詳細解釋這個問題。
第一個案例是常見的圓角未顯示的情況。有時候我們在設置div元素圓角屬性時可能會忘記為元素指定寬度和高度，導致圓角效果無法正常顯示。代碼如下：

html
<p>下面的div圓角未顯示，是因為未設置元素的寬度和高度：</p>
<pre>
<div class="box"></div>
<style>
.box {
border-radius: 10px;
background-color: #ccc;
}
</style>

在上面的代碼中，我們設置了一個class為box的div元素，并通過CSS的border-radius屬性為其指定了10px的圓角。然而在頁面中顯示時，我們會發現div元素并沒有展示出圓角效果。這是因為我們沒有設置該元素的寬度和高度，導致圓角屬性無法應用。解決這個問題非常簡單，只需為該元素指定一個固定的寬度和高度即可：
html

設置div元素的寬度和高度后，圓角效果正常顯示：

<div class="box"></div>
<style>
.box {
border-radius: 10px;
background-color: #ccc;
width: 100px;
height: 100px;
}
</style>

在以上的代碼中，我們為box元素設置了一個固定的寬度和高度（寬高均為100px），這樣就能夠正確地顯示圓角效果了。
第二個案例是使用了浮動布局或定位屬性后，圓角未正常顯示。有時候我們在使用浮動布局或定位屬性（如position: absolute）時，會出現圓角未正常顯示的現象。這是因為元素的浮動或定位屬性會改變元素的顯示方式，導致圓角屬性無法正確應用。代碼如下：

html
<p>下面的div圓角未顯示，是因為元素使用了浮動布局（float: left）：</p>
<pre>
<div class="box"></div>
<style>
.box {
border-radius: 10px;
background-color: #ccc;
float: left;
width: 100px;
height: 100px;
}
</style>

在上面的代碼中，我們為box元素設置了浮動布局（float: left），并指定了固定的寬度和高度。然而在頁面顯示時，我們會發現div元素的圓角并未顯示出來。解決這個問題的方法是給元素添加一個額外的父容器，并設置該父容器的overflow屬性為hidden，以清除浮動影響：
html

為div元素的父容器添加overflow: hidden樣式，圓角效果可正常顯示：

<div class="parent">
<div class="box"></div>
</div>
<style>
.parent {
overflow: hidden;
}
.box {
border-radius: 10px;
background-color: #ccc;
float: left;
width: 100px;
height: 100px;
}
</style>

在以上的代碼中，我們為box元素添加了一個父容器parent，并在父容器的CSS樣式中設置了overflow: hidden。這樣就能夠正常地顯示圓角效果了。
通過以上的兩個案例，我們可以看到，在設置div元素的圓角屬性時，需注意是否為元素指定了寬度和高度，并注意浮動布局或定位屬性對圓角效果的影響。通過合理的設置和調整，我們就能夠實現圓角效果的正常顯示。